iis服务器助手广告广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >八个Vue中常用的v指令详解
  • 715

0
分享到

八个Vue中常用的v指令详解

2024-04-02 19:04:59 715人浏览 薄情痞子
摘要

目录Vue中常用的8种v指令1 v-text 指令2 v-html 指令3 v-on 指令案例：计数器4 v-show 指令5 v-if 指令6 v-bind 指令7 v-for 指

Vue中常用的8种v指令

根据官网的介绍，指令 是带有 v- 前缀的特殊属性。通过指令来操作DOM元素

指令功能
v-text=“变量/表达式”文本的设置
字符串变量+数字可以直接写是拼接
字符串如果出现要使用外部不相同的引号
v-html=“变量”文本或者页面的设置
如果变量只是普通文本，作用和 v-text 相同
如果变量是一个完整的标签字符串，则会解析成为html
v-on:click=“方法名”
@click=“方法名”		绑定方法
可以是无参方法，也可以是有参方法
v-show=“布尔值变量”标签的显示和隐藏
根据布尔值变量的真与假，将标签显示或隐藏
v-if=“布尔值变量”标签的创建与销毁
效果与 v-show 相同，但是频繁操作性能开销很大
v-for="item,index in arr"
v-for=“item in arr”		数组的循环遍历
将数组中的数据，索引进行遍历
v-bind:标签属性=“属性值”
:标签属性=“属性值”		标签属性的绑定
可以直接修改标签中的属性值
v-model=“变量值”数据双向绑定
变量值的修改会影响页面显示，页面变化也会影响变量值

1 v-text 指令

作用:

  • 获取data数据, 设置标签的内容，以纯文本进行显示
  • v-text 会覆盖 标签中的内容，如果想要拼接数据，可以直接在v-text中拼接
    • 如果拼接的是数字：直接使用 “+”
    • 如果拼接的是字符串，需要使用与外部不同的引号进行包裹内容

注意: 默认写法会替换全部内容,使用插值表达式{{}}可以替换指定内容.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta Http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 第一种.获取 vue 中定义的数据，会将插值表达式的内容与标签中的内容进行拼接 -->
        <h2>{{msg}}-云梦归遥</h2>
        <!-- 第二种.获取 vue 中定义的数据，设置标签中的内容，而且会覆盖标签中的内容 -->
        <h2 v-text="msg">-云梦归遥</h2>
        <h2 v-text="msg+21"></h2> <!-- v-text 拼接数字可以直接相加 -->
        <h2 v-text="msg+'-云梦归遥'"></h2> <!-- v-text 拼接字符串需要用不同于外部的单引号或双引号 -->
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java 程序员",
        },
    });
</script>
</html>

2 v-html 指令

作用:

可以当做 v-text 一样使用，显示普通文本

设置元素的 innerHTML (可以向元素中写入新的标签)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1.获取普通文本的三种方式 -->
        <h2>{{msg}}</h2>
        <h2 v-text="msg"></h2>
        <h2 v-html="msg"></h2>
        <hr>
        <!-- 2.v-html 不仅可以当做 v-text 使用，更重要的是可以设置元素的 innerHTML -->
        <h2 v-text="url"></h2> <!-- v-text 直接以文本形式进行显示 -->
        <h2 v-html="url"></h2> <!-- v-html 将会以定义的标签的形式进行显示 -->
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java程序员",
            url: "<a href='https://www.baidu.com'>百度一下</a>"
        },
    });
</script>
</html>

3 v-on 指令

作用: 为元素绑定事件, 比如: v-on:click,可以简写为 @click="方法

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 1.单击事件 -->
        <!-- 标准书写的方式 v-on:click="方法名" -->
        <input type="button" value="调用v-on指令-单击事件-标准书写" v-on:click="show"><br>
        <!-- 简写的方式: @click="方法名" -->
        <input type="button" value="调用v-on指令-单击事件-简写的方式" @click="show"><br>
        <!-- 2.双击事件 -->
        <input type="button" value="双击事件" @dblclick="show"><br>
        <hr>
        <!-- 绑定点击事件，修改标签内容 -->
        <h2 @click="changeName">{{msg}}</h2>
        <h2 v-text="msg" @click="changeName"></h2>
        <h2 v-html="msg" @click="changeName"></h2>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            msg: "Java程序员"
        },
        // 通过 methods 来定义 v-on 中调用的方法
        methods: {
            show:function(){
                alert("v-on 指令对应的方法被调用");
            },
            changeName:function(){
                // 使用 this 获取 data 中的数据
                this.msg += "-云梦归遥";
            },
        },
    });
</script>
</html>

案例：计数器

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
    <!-- <link href="CSS/inputNum.css" rel="external nofollow"  rel="stylesheet"> -->
</head>
<body>
    <div id="app">
        <!-- 计算功能区域 -->
        <div>
            <input type="button" @click="addNum" value="+">
            <span>{{num}}</span>
            <input type="button" v-on:click="minusNum" value="-">
        </div>
        <p>{{result}}</p>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            num: 0,
            result: "当前数值是[ 0 ], 还未执行操作"
        },
        methods: {
            addNum: function(){
                this.num += 1;
                this.result = "当前数值是[ " + this.num + " ], 执行 +1 操作";
            },
            minusNum: function(){
                this.num -= 1;
                this.result = "当前数值是[ " + this.num + " ], 执行 -1 操作";
            },
        },
    });
</script>
</html>

4 v-show 指令

作用: v-show 需要一个 boolean 类型的值，根据值的变化，进行标签的显示和隐藏

原理：修改 style 的display为 block 或 none，进行显示和隐藏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="图片显示/隐藏切换" @click="show"><br>
        <!-- v-show 需要一个 boolean 类型的值，根据值的变化，进行标签的显示和隐藏 -->
        <img src="img/loGo.jpg" v-show="flag" style="width: 300px; height: 300px;">
        <!-- 还可以通过表达式的结果 来进行显示和隐藏 -->
        <img src="img/logo.jpg" v-show="num > 18" style="width: 300px; height: 300px;">
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            flag: true, // 作为是否显示图片的判定值
            num: 21
        },
        methods: {
            show:function(){
                this.flag = !this.flag;
            },
        },
    });
</script>
</html>

5 v-if 指令

作用: 根据表达值的真假,切换元素的显示和隐藏( 操纵dom 元素 )

原理：会操作 DOM 元素，将元素删除或添加，而不是像 v-show 一样修改样式

使用场景：频繁切换使用 v-show，反之使用 v-if

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <input type="button" value="v-if切换图片显示/隐藏" @click="show"><br>
        <!-- v-if 根据表达式的真假判断显示 或 隐藏 -->
        <img src="img/logo.jpg" style="width: 300px; height: 300px;" v-if="isshow">
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data:{
            isShow: false,
        },
        methods: {
            show: function(){
                this.isShow = !this.isShow;
            },
        },
    });
</script>
</html>

6 v-bind 指令

作用: 设置元素的属性 （比如：src，title，class，style传递JSON串）

一次只能修改一个属性

  • v-bind:属性名=“属性值”
  • :属性名
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- 这是原图片 -->
        <img src="img/logo.jpg" style="width: 300px;height: 300px;" alt="图片加载失败">
        <!-- v-bind:src 设置了一个 图片的 属性 -->
        <img v-bind:src="img1" style="width: 450px; height: 300px;" alt="图片加载失败">
        <!-- v-bind:title 设置了一个图片的 标题 ，使用 v-bind修改属性都可以简写为 :属性名-->
        <img v-bind:src="img2" style="width: 450px;height: 300px;" :title="img2_title" alt="图片加载失败">
        <!-- v-bind 设置 class -->
        <div style="width: 300px; height: 300px; background: green;" :style="{width: size + 'px'}"></div>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            img1: "img/4.png",
            img2: "img/3.png",
            img2_title: "斗罗大陆-火舞",
            size: 200,
        },
        methods: {
            
        },
    });
</script>
</html>

7 v-for 指令

作用: 根据数据生成列表结构，常与数组一起使用，进行遍历操作

  • v-for="item,index in arr1"
  • v-for="person in persons"

相关方法：

  • push（）：将元素追加进入数组
  • shift（）：将数组的起始元素删除

数组的长度变化,会同步更新到页面上,是响应式的

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <ul>
            <!-- v-for：在 li 标签中进行获取数组元素，进行展示 -->
            <!-- item: 循环得到的元素；index：获取元素在数组中的下标 -->
            <li v-for="item,index in arr1">
                第{{index + 1}}个同学: {{item}}
            </li>
        </ul>
        <hr>
        <input type="button" value="添加数据" @click="aDDData">
        <input type="button" value="移除数据" @click="removeData">
        <!-- v-for 遍历，展示数据 -->
        <h2 v-for="person in persons">
            我是 {{person.name}}, 我今年 {{person.age}} 岁.
        </h2>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            // 数组
            arr1: ["Mike", "John", "Jack"],
            // 对象数组
            persons: [
                {name: "Mike", age: 21},
                {name: "John", age: 22},
                {name: "Jack", age: 23},
            ],
        },
        methods: {
            addData: function(){
                // 向数组中添加元素
                this.persons.push({name: "Peter", age: 24});
            },
            removeData: function(){
                // 移除数组中的元素，会移除第一个元素
                this.persons.shift();
            },
        },
    });
</script>
</html>

8 v-on 补充

作用：

  • 可以向函数传递参数
  • 事件修饰符，可以制定哪些方式触发事件，比如说按键，回车等
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.min.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on：绑定函数，可以进行传参 -->
        <input type="button" value="礼物刷起来" @click="show(3, '穿云箭')"><br>
        <span style="color: green;">向主播狂刷{{num}}个</span>
        <span style="color: red;">{{gift}}</span>
        <hr>
        <!-- v-on：事件修饰符 指定哪些方式触发事件，比如说 按键，回车等等 -->
        <input type="text" @keyup="up" placeholder="一输入内容就会弹窗"><br>
        <input type="text" @keyup.enter="up" placeholder="输入回车才会弹窗"><br>
    </div>
</body>
<script>
    var VM = new Vue({
        el: "#app",
        data: {
            num: 1,
            gift: "一个鱼丸",
        },
        methods: {
            show:function(p1, p2){
                this.num = p1;
                this.gift = p2;
            },
            up:function(){
                alert("hello world");
            },
        },
    });
</script>
</html>

总结

到此这篇关于八个Vue中常用的v指令详解的文章就介绍到这了,更多相关Vue常用v指令内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: 八个Vue中常用的v指令详解

本文链接: https://www.lsjlt.com/news/146907.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • 八个Vue中常用的v指令详解
    目录Vue中常用的8种v指令1 v-text 指令2 v-html 指令3 v-on 指令案例：计数器4 v-show 指令5 v-if 指令6 v-bind 指令7 v-for 指...
    99+
    2024-04-02
  • 解析vue.js中常用v-指令
    目录Vue中 v-text on if for model bind show 的解释 v-textv-html:v-onv-ifv-forv-modelv-bindv-showv-...
    99+
    2024-04-02
  • Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用
    这篇文章给大家分享的是有关Vue中常用指令v-if, v-for, v-show,v-else, v-bind, v-on有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。V...
    99+
    2024-04-02
  • vue指令中的v-once用法
    目录v-once在日常开发中用的很多常见用法如下v-once是什么v-once在日常开发中用的很多 只渲染元素和组件一次，随后的渲染，使用了此指令的元素/组件及其所有的子节点，都会当...
    99+
    2024-04-02
  • Vue常用指令v-if与v-show的区别浅析
    目录前言1. v-show2. v-if 3. v-show和v-if的区别 1. 在原理方面的区别2. 在使用应用场景方面的区别总结前言 v-show 和v-if 是比较...
    99+
    2024-04-02
  • vue中指令v-text、v-html、v-bind怎么用
    这篇文章主要介绍了vue中指令v-text、v-html、v-bind怎么用，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。一 ： 指令的概念...
    99+
    2024-04-02
  • Vue中列表渲染指令v-for的基本用法详解
    目录一、原理概述二、基本用法（1）v-for循环普通数组（2）v-for循环对象（3）v-for循环对象数组（4）v-for迭代整数 一、原理概述 v-for指令时在模板编...
    99+
    2023-05-17
    Vue列表渲染指令v-for使用 Vue列表渲染指令v-for Vue列表渲染v-for Vue v-for
  • vue指令中v-bind怎么用
    这篇文章将为大家详细讲解有关vue指令中v-bind怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。1、v-bind:可以为元素的属性绑定一些数据 <div id="...
    99+
    2023-06-25
  • 怎么使用Vue中v-指令
    这篇文章主要介绍“怎么使用Vue中v-指令”，在日常操作中，相信很多人在怎么使用Vue中v-指令问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用Vue中v-指令”的疑惑有所帮助！接下来，请跟着小编一起来...
    99+
    2023-06-25
  • Vue中指令v-bind动态绑定及与v-for结合使用详解
    目录前言：一、 v-bind动态绑定class1. v-bind动态绑定class(对象语法)2. v-bind动态绑定class(数组用法)3.v-bind动态绑定sty...
    99+
    2024-04-02
  • Vue自定义指令v-focus实例详解
    目录前言自定义指令 directive项目实际使用技术背景实际操作优势setTimeout(fn, 0) 永远的神$nextTick(callback)小结前言 本文直接参考vue2...
    99+
    2024-04-02
  • Vue之常用的内置指令详解
    <body> <div id="root"> <h1 v-pre>好好学习</h1> &...
    99+
    2024-04-02
  • vue中v-model指令与.sync修饰符的区别详解
    目录v-model .sync 细微之处的区别 总结功能作用场景： v-model <!--父组件--> <template> ...
    99+
    2024-04-02
  • vue指令中的v-once怎么使用
    本篇内容主要讲解“vue指令中的v-once怎么使用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“vue指令中的v-once怎么使用”吧!v-once在日常开发中用的很多只渲染元素和组件一次，随...
    99+
    2023-06-30
  • Vue中v-model指令如何使用
    今天就跟大家聊聊有关Vue中v-model指令如何使用，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。v-model 用在 input 元素上时v-m...
    99+
    2024-04-02
  • Vue中v-for指令有什么用
    这篇文章主要介绍Vue中v-for指令有什么用，文中介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们一定要看完！v-for用 v-for 指令根据遍历数组来进行渲染有下面两种遍历形式<div&nb...
    99+
    2024-04-02
  • Vue中v-else-if指令怎么用
    这篇文章将为大家详细讲解有关Vue中v-else-if指令怎么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。v-else-ifv-else-if 充当 v-if 的 e...
    99+
    2024-04-02
  • Vue中v-html指令有什么用
    这篇文章主要为大家展示了“Vue中v-html指令有什么用”，内容简而易懂，条理清晰，希望能够帮助大家解决疑惑，下面让小编带领大家一起研究并学习一下“Vue中v-html指令有什么用”这篇文章吧。v-htm...
    99+
    2024-04-02
  • Vue中v-if指令有什么用
    这篇文章将为大家详细讲解有关Vue中v-if指令有什么用，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。v-ifv-if 可以实现条件渲染，Vue 会根据表达式的值的真假条...
    99+
    2024-04-02
  • Vue中v-once指令有什么用
    这篇文章给大家分享的是有关Vue中v-once指令有什么用的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。v-oncev-once 关联的实例，只会渲染一次。之后的重新渲染，实例极...
    99+
    2024-04-02
软考高级职称资格查询
iis服务器助手广告
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作