Vue中的指令

最新推荐文章于 2024-05-09 17:38:33 发布

℡52Hz★

最新推荐文章于 2024-05-09 17:38:33 发布

阅读量51

点赞数

分类专栏： Vue知识点文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_53541336/article/details/129900052

版权

Vue知识点专栏收录该内容

2 篇文章 0 订阅

订阅专栏

今天来更新一下Vue中一些常见的指令。指令是Vue模板中最常用的一项功能，主要职责是当其表达式的值改变时，相应地将某些行为应用在DOM上。

（一）v-show

v-show指令会根据表达式的真假值，切换元素的display css属性，来显示或隐藏元素，当条件变化时，该指令会自动触发过渡效果。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="root">
			<h1 v-show="name">李四</h1>
			<h1 v-show="age">18</h1>
			<h1 v-show="sex">男</h1>
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						name:true,
						age:false,
						sex:true
					}
				}
			});
			const vm=app.mount("#root");
		</script>
	</body>
</html>

我们可以清楚的从以上代码看到，年龄未展示出来，原因就在于v-show指令计算age的值为false，所以它展示在页面上相当于给css写了display等于none一样。

（二）v-if

v-if与v-show其实也有相同的属性，但是又有一定的区别。先来了解一下v-if指令。它是根据表达式的真假来有条件的渲染元素。

v-show和v-if的不同点在于：（1）v-show指令通过修改元素的display属性让其显示或者隐藏；

（2）v-if指令是通过直接销毁和重建DOM达到让元素显示和隐藏的效果，v-if可以实现组件的重新渲染。通过以下代码我们可以更好的区分：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="root">
			<h1 v-if="name">李四</h1>
			<h1 v-if="age">18</h1>
			<h1 v-if="sex">男</h1>
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						name:true,
						age:false,
						sex:true
					}
				}
			});
			const vm=app.mount("#root");
		</script>
	</body>
</html>

从以上代码中我们可以发现v-if=“age”的元素并没有在控制台中渲染出来，也就是说，当表达式的值为false时，v-if指令不会创建该元素，只有当表达式的值为true时，才会真正创建该元素。这与v-show指令不同，v-show是不管表达式的真假，元素本身都会被创建，显示与否是通过css的样式属性display来控制的。

（三）v-for

v-for指令可以对数组、对象进行循环，来获取到其中的每一个值。这里只演示对数组的循环。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
	</head>
	<body>
		<div id="root">
			<ul>
				<li v-for="item in namelist">
					{{item.name}}--{{item.age}}--{{item.sex}}
				</li>
			</ul>
		</div>
		<script>
			const app=Vue.createApp({
				data(){
					return{
						namelist:[
							{name:'张三',age:'18',sex:'男'},
							{name:'李四',age:'20',sex:'男'},
							{name:'小红',age:'17',sex:'女'}
						]
					}
				}
			});
			const vm=app.mount("#root");
		</script>
	</body>
</html>

（四）v-bind

v-bind指令主要用于响应更新HTML元素的属性，将一个或多个属性或者一个组件的prop动态绑定到表达式。v-bind一般在代码中可以省略不写，即：xxx即可。

（五）v-html

v-html指令用于更新元素的innerHTML，内容按普通HTML插入，不会作为vue模板进行编译。

℡52Hz★

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue中的指令

从以上代码中我们可以发现v-if=“age”的元素并没有在控制台中渲染出来，也就是说，当表达式的值为false时，v-if指令不会创建该元素，只有当表达式的值为true时，才会真正创建该元素。这与v-show指令不同，v-show是不管表达式的真假，元素本身都会被创建，显示与否是通过css的样式属性display来控制的。v-show指令会根据表达式的真假值，切换元素的display css属性，来显示或隐藏元素，当条件变化时，该指令会自动触发过渡效果。它是根据表达式的真假来有条件的渲染元素。
复制链接

扫一扫