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

2024-10-09 22:25:39

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"

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指令内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

浅析vue中常见循环遍历指令的使用 v-for

vue中循环遍历使用的指令是v-for 1.v-for遍历数组 (1)value in arr 遍历数组中的元素 (2)(value,index) in arr 遍历数组中的元素和数组下标运行代码: <body> <div class="box"> <ul> <li v-for="value in arr">{{value}}</li><br> <li v-for="(valu
Vue.directive自定义指令的使用详解

很多教程都是在讲自定义指令的概念和语法,看的相当蛋疼.本文不讲语法和概念,只讲用法. 自定义指令基本就是用来操作DOM的,虽然官方推荐数据驱动视图,有时候还是需要自定义指令来操作DOM,指令可复用. 1. 自定义指令实现拖拽 HTML: <div v-drag>我可以拖拽</div> JS: Vue.directive('drag', inserted:function(el){ //inserted 钩子函数:当元素被插入父元素时触发,可省略 let oDiv=el; //el
vue.js指令v-for使用及索引获取

1.v-for 直接上代码. 示例一: <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no" /> <title></title> <
详解在Vue中通过自定义指令获取dom元素

vue.js 是数据绑定的框架,大部分情况下我们都不需要直接操作 DOM Element,但在某些时候,我们还是有获取DOM Element的需求的: 在 vue.js 中,获取某个DOM Element常用的方法是将这个元素改成一个组件 (component),然后通过 this.$el 去获取,但是在一些很小的项目里,在一些没有使用 webpack 等构建工具的项目中,创建一个组件并不是那么值得,所以 vue 提供了另一种操作DOM元素的方式,就是自定义指令 (directive) : 自定
Vue自定义图片懒加载指令v-lazyload详解

Vue是可以自定义指令的,最近学习过程中遇见了一个需要图片懒加载的功能,最后参考了别人的代码和思路自己重新写了一遍.以下将详细介绍如何实现自定义指令v-lazyload. 先看如何使用这个指令: <img v-lazyload="imageSrc" > imageSrc是要加载的图片的实际路径. 为了实现这个指令,我们首先单独建立一个文件,名字为lazyload.js.并填写基本的代码,如下: //Vue 图片懒加载,导出模块 export default (Vue , o
解决vue组件中使用v-for出现告警问题及v for指令介绍

在项目中运行v-for代码段时, <flexbox v-if="roleShow" style="padding:15px; box-sizing: border-box;"> <flexbox-item v-for="role in roles " > <x-button mini :type="role.type" style="padding: 0 14px" @clic
详解VueJs中的V-bind指令

引子 v-bind 主要用于属性绑定,Vue官方提供了一个简写方式 :bind,例如:  <a v-bind:href="url"></a>  <a :href="url"></a> 一.概述 v-bind 主要用于属性绑定,比方你的class属性,style属性,value属性,href属性等等,只要是属性,就可以用v-bind指令进行绑
Vue.js 中的 v-show 指令及用法详解

1 用法 v-show 指令通过改变元素的 css 属性(display)来决定元素是显示还是隐藏. html: <div id="app"> <p v-show="type==='科技'">大数据之下的锦鲤:为什么你的微博总抽不到奖</p> </div> js: <script> var app = new Vue({ el: '#app', data: { type:'技术' } }); </sc
VUE元素的隐藏和显示（v-show指令)

除了click单击事件,还有mouseover,mouseover等鼠标事件. dbclick双击事件. v-on:click/mouseover/mouseover/mousedown/dbclick/... v-show指令 v-show="true/false" //控制元素显示/隐藏示例代码: <!DOCTYPE html> <html> <head> <title></title> <meta charset
Vue.js常用指令汇总（v-if、v-for等）

有时候指令太多会造成记错.记混的问题,所以本文在记忆的时候会采用穿插记忆的方式,交叉比对,不易出错. 本文主要讲了一下六个指令: v-if//v-show//v-else//v-for//v-bind//v-on 1. v-if 条件渲染指令,根据其后表达式的bool值进行判断是否渲染该元素: eg: HTML: <div id="example01"> <p v-if="male">Male</p> <p v-if=&qu