vue系列：vue的常见指令——v-text、v-html、v-model、 v-cloak、v-bind、 v-on、v-if、v-show、v-for

Laymanღ

已于 2022-05-01 16:33:05 修改

阅读量1.5k

点赞数 1

分类专栏： Vue 文章标签： vue.js

于 2022-05-01 16:25:16 首次发布

本文链接：https://blog.csdn.net/TotoroChinchilla/article/details/124523955

版权

Vue 专栏收录该内容

13 篇文章 1 订阅

订阅专栏

vue系列:vue常用指令以及其用法

好记性不如烂笔头，学习过程中也要记笔记，方便日后的复习

常见Vue指令的用法及注意事项，包括v-text、v-html、v-model、v-cloak、v-bind、 v-on、v-if、v-show、v-for

一、什么是指令？

指令 (Directives) 是带有 v- 前缀的特殊 attribute（vue 指令都以 v-开头）。指令 attribute 的值预期是单JavaScript 表达式 (v-for 是例外情况)。

二、常用指令

1、v-text

<div id="app">
	<h1>{{msg}}</h1>
	<!-- {{msg}}可以用 v-text 指令替代 -->
	<h1 v-text="msg"></h1>
</div>
<script>
	var vm=new Vue({
		el:'#app', 
		data:{
			msg:'helloworld'
			 }
	})
</script>

作用：显示 data 中的变量值，与{{ }}语法基本一样但是又不完全一样

原因：{{}}表达式只会更新原本占位插值所在的数据内容，而 v-text指令则会替换掉整个的内容

2、v-html

<div id="app">
	<h1 v-text="msg"></h1>
	<h1 v-html="msg"></h1>
</div>
<script>
	var vm=new Vue({
		el:'#app', 
		data:{
			msg:'<a href="http://www.baidu.com">百度</a>' 						
			}
	})
</script>

v-text运行结果是< a href=“http://www.baidu.com”>百度一串数字。
v-html运行结果是百度，带连接的百度。

v-text 与v-html 的区别：
相同点：都可以更新页面元素内容
不同点：v-text 会将数据以字符串文本的形式更新，而 v-html 则是将数据以 html 标签的形式更新

3、v-model

在表单控件或者组件上创建双向绑定

<div id="app">
	{{msg}}
	<input type="text" v-model="msg">
</div>
<script>
	var vm= new Vue({
		el: '#app', 
		data: {
			msg: 'helloworld', 
		}
	});
</script>

v-model 指令完成数据在 View 与Model 间的双向绑定。
如图：
在这里插入图片描述
v-model的三个修饰符
（1）lazy 修饰符
在默认情况下，v-model 在每次 input 事件触发后将输入框的值与数据进行同步。也就是如下文本框中输入的与显示的同步，每输入一个字符都会同步显示。当添加 lazy 修饰符，从而转变为失去焦点同步。也就是说现在在文本框中输入字符时msg 的值不会及时改变，要等光标移到文本框外面并单击空白处才同步改变。
（2）number 修饰符
如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符
如果要对数字进行求和，可以用此方法，还可以用 parseInt 进行转换，如下：
{{parseInt(num1)+parseInt(num2)}}
效果一样是求和
（3）trim 修饰符
如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符。有了 trim 修饰，只要光标离开了文本框在其他地方单击下，两端若有空格就会自动去掉

4、v-cloak

因为{{}}模板语法在数据较多是会存在闪烁问题，就就是可能页面数据还没加载渲染完成，就提前看到了{{}}。我们可以使用v-cloak来解决这个问题。

但是使用 v-cloak,需要配合 css 样式一起使用，否则不会生效。通过 css 样式先设置为不显示，在数据渲染完成之后就会自动修改 display 值

<style>
	[v-cloak] {
		display: none;
	}
</style>
</head>
<body>
<div id="app">
	<h3 v-cloak> {{msg}}</h3>
</div>
<script>
	var vm = new Vue({
		el: '#app', data: {
		msg: '张三', 
	},
	// 使用 created 函数作用就是测试页面尚未渲染数据时提前看到了{{}}，created 是 vue 生命周期中的一个钩子函数
	created: function () {
		alert('vue 实例刚创建，页面尚未渲染数据')
	}
});
</script>
</body>

5、v-bind

用来在标签上绑定标签的属性和样式

语法: v-bind:属性=”值”
v-bind 可以简写为：
如：v-bind:src=““简写为:src=””

(1)v-bind绑定class属性

<style>
	.a{
	color:red;
	font-size:20px;
	}
	.b{
	background-color: yellow;
}
</style>
</head>
<body>
	<div id="app">
	<!-- 普通 css 绑定 -->
	<p class="a">张三</p>
	<!-- 直接这样绑定不行，加了:表示到 vue 中去找 a 属性 -->
	<!-- <p :class="a">张三</p> -->
	<!-- 正确方式 1，直接在原来的类名外面写上一对单引号 -->
	<p :class="'a'">张三 1</p>
	<!-- 正确方式 2：通过变量形式 -->
	<p :class="av">张三2</p>
	<!-- 正确方式 3：应用多个样式,用数组形式，数组值为多个属性变量值 -->
	<p :class="[av,bv]">张三 3</p>
	<!-- 正确方式 4（常用）：json 形式,键值对，键就是样式名，值固定为布尔型，即 true 或 false，true 表示应用该样式，false 表示不应用 -->
	<!-- 当然直接写 true 或 false 也就是写死，可以用变量，比如 flag，就这表示来自 vue 中的值 -->
	<p :class="{a:flag,b:false}">张三 4</p>
	<p :class="{a:num>0,b:false}">张三 5</p>
	<!—-上面键值对如果太长了，影响阅读，正确方式 5：通过变量引用 json 形式 -->
	<p :class="varStyle">张三6</p>
	</div>
<script>
	var vm = new Vue({
		el: "#app", 
		data: {
			avr:'a',
			 bvr:'b', 
			 flag:true,
			 num:-3, 
			 varStyle:{
				a:true,
				b:true
		// 这个地方也可使用 flag 指定，但要在前面加上 this，即 this.flag
			}
		}
	})
</script>
</body>

(2)v-bind绑定style属性

<div id="app">
	<!-- 内嵌样式的绑定 -->
	<p :style="myStyle">张三 1</p>
	<!-- 内嵌样式的绑定,使用数组形式 -->
	<p :style="[myStyle,myStyle2]">张三 2</p>
</div>
<script>
	var vm = new Vue({
		el: "#app", 
		data: {
			myStyle:{
		// 注意这里的属性名要使用驼峰命名法，属性值需要单引号引起来
		//驼峰命名法:第一个单词以小写字母开始；从第二个单词开始以后的每个单词的首字母都采用大写字母
				color:'red', 
				fontSize:'30px'
				 },
			myStyle2:{
				backgroundColor:'#ccc' 
				}
			}
		})
</script>

6、v-on

用法：v-on:事件名=”函数”。
事件名比如：click、dblclick、mousedown、mouseup 等等。
v-on：可以简写为@

<div id="app">
<!-- 直接 onclick 这是原来 html 写法，是调用不到 show 方法，因为这个 show 方法就不能定义在 vue 实例中 -->
<!-- <button οnclick="show()">点我</button> -->
<!-- 在 vue 中要绑定事件要使用 v-on -->
	<button @click="show()">点我</button>
	<!-- show 后面不带（）也行，vue 中允许这样写，当然写（）更清楚这是方法，但是如果有参数必须得有括号的 -->
	<button v-on:click="show">点我</button>
	<hr>
	<button v-on:click="add()">向数组中添加一个元素</button>
	<br>
	{{arr}}
	<hr>
	<button v-on:mouseover="show">鼠标经过时执</button>
	<button v-on:dblclick="show">鼠标双击时</button>
</div>
<script>
	/* js 定义方法格式
	function show(){
	} */
	var vm = new Vue({
		el: "#app", 
		data: {//存储数据地方
			arr: [12,23,34,45]
			},
		methods:{//存储方法地方
			// show:function()这句也可以直接简写为 show()
			show(){
				console.log("这是 show 方法")
			},
			add:function(){
			//arr.push(88);
			//直接这句不行，因为找不到 arr
				console.log(this);
				//输出 this 看下，发现 this 就是当前这个 vue 实例
				console.log(this===vm)//这句结果为 true 也说明 this就当前 vue 实例 vm
		//==单纯的比较值，===不仅比较值还要比较数据类型
				this.arr.push(88);
				//要在 arr 前面加 this 或者 vm，表示当前实例下的 arr
				vm.arr.push(99);//当没有接收 vue 实例，也就是没有定义 vm 时，就直接用 this
				console.log(this.arr)
				this.show();
//在 add 方法中直接调用 show 方法也要在前面加上 this
			}
		}
	})
</script>

7、v-if

（1）当 flag 值为 false 时 dom 元素会销毁，当为 true 时又会重新创建

<body>
    <div id="app">
    <!-- 双分支结构 -->
       <div v-if="flag">Yes</div>
       <div v-else>no</div>
       <!-- 多分支结构 -->
       <div v-if="grade>90">优秀</div>
       <div v-else-if="grade>70">中等</div>
       <div v-else-if="grade>60">及格</div>
       <div v-else>不及格</div>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag:false,
                grade:78
            },
        })
    </script>
</body>

（2）元素上使用 v-if 条件进行分组显示与隐藏,可以省略很多代码

<body>
    <div id="app">
        <!-- 下面这种效果v-if="flag"写了很多遍 -->
        <template v-if="flag">
            <div>计算机组成原理</div>
            <div>C#程序设计</div>
            <div>ASP.NET动态网页设计</div>
        </template>
    </div>
    <script>
        var vm = new Vue({
            el: "#app",
            data: {
                flag: true,
                grade: 78
            },
        })
    </script>
</body>

8、v-show

v-show 指令也是根据表达式的真假值判断元素的显示与否
带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的 CSS 属性 display。

v-if 与v-show的区别
用来根据表达式的值显示或隐藏元素，v-show 是通过
display 实现，显示与隐藏只是切换 display 属性；v-if 每次删除后重新创建，即显示与隐藏是在销毁与创建元素之间切换

如下代码块：

<div id="app">
<!-- v-show 后面也可以直接跟 true 或 false，也可以使用 vue实例中的对象（因为 v 指令都可以访问 vue 实例中的数据 -->
	<div style="width:100px;height:100px;background-color:red;" v-show="flag">我是红色正方形</div>
	<!-- 通过下面按钮来切换上面 div 的显示与隐藏 -->
	<hr>
	<!-- 第一种方法 -->
	<!-- <button v-on:click="change">隐藏</button> -->
	<button v-on:click="change">隐藏/显示</button>
	<!--第二种方法：事件里也可以直接写一个语句 -->
	<button v-on:click="flag=false">隐藏</button>
	<!-- 显示与隐藏之间切换 -->
	<button v-on:click="flag=!flag">隐藏/显示</button>
</div>
<script>
	var vm = new Vue({
		el: "#app",
		data: {//存储数据地方
			flag:true
		},
		methods:{
			change(){
			// this.flag=false;//隐藏
			this.flag=!this.flag;//隐藏与显示切换
		}
		}
	})
</script>

当我写的是v-if，它是隐藏时，控制台显示的是
在这里插入图片描述
当我写的还是v-show，他显示隐藏时，控制台是

（1）上面是通过 v-show 显示与隐藏，切换到代码查看器，会发现 div 的显示与隐藏是通过 display 是否为 none。
如果把 v-show 换成 v-if，则当 v-if 后面表达式值为 false 时，是销毁整个 div 元素，为 true 时，则重新创建。
（2）v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。
（3）v-show 不支持元素，也不支持 v-else。一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，当我们需要频繁控制元素的显示与否时，推荐使用v-show 指令，避免因为使用 v-if 指令而造成的高性能消耗

9、v-for

v-for 指令，可以对数组、对象、数字、字符串进行循环，获取到源数据的每一个值。使用 v-for 指令，必须使用特定语法 item in items ，其中 items 是源数据（数组、字符串等），而 item 则是当前遍历的元素的别名，这里类似于 C# 中的 foreach 的循环格式。

（1）使用 v-for 时尽量提供 key，提高修改元素的效

<div id="app">
	<ul>
	<li v-for="value in arr2">{{value}}</li>
	<hr>
<!-- 通过指定:key 属性为每个元素绑定一个唯一的 key,其优
势是当更新元素时可重用元素提高效率 -->
<!-- 也就是说假设数组 arr2 元素值发生变化时，如果没有:key
属性，那么会把 arr2 所有值先删除再重新插入。有 key 的话就会重用
原有元素，也就是在原先基础上修改 -->
	<li v-for="(value,key) in arr2" :key="key">{{value}}</li>
	</ul>
</div>
<script>
	var app4 = new Vue({
		el: '#app', 
		data: {
		arr2: [1,2,3,4,5],
		 }
	})
</script>

10、v-once 与 v-pre

v-once 只绑定一次。

v-pre 不解析{{ }}。

<div id="app">
	<input type="text" v-model="msg">{{msg}}</input><br>
	<!-- 只绑定一次 ，后面修改了 msg 的值这里不变-->
	<h3 v-once>{{msg}}</h3>
	<!-- 这里我就想把{{}}显示出来怎么办？ 加一个 v-pre 指令-->
	<h3 v-pre>{{msg}}</h3>
	<!-- <h3 v-pre>{{hello vue}}</h3> 这里如果没有 v-pre 指令就会报错，因为会认为 hello vue 是 data 里的一个属性，而实际不存在，所以会报错-->
</div>
<script>
	var vm = new Vue({
		el: "#app", 
		data: {
			msg:"张三"
		}
	})
</script>

总结

本人的学习笔记，为了方便日后回顾，也可供大家参考，如果有错误的地方，还请各位指出。谢谢！！！

Laymanღ

关注

1
点赞
踩
8

收藏

觉得还不错? 一键收藏
打赏
0
评论
vue系列：vue的常见指令——v-text、v-html、v-model、 v-cloak、v-bind、 v-on、v-if、v-show、v-for

vue的常见指令——v-text、v-html、v-model、 v-cloak、v-bind、 v-on、v-if、v-show、v-for
复制链接

扫一扫