【Vue.js】v-if、v-show、v-for

最新推荐文章于 2024-06-25 08:54:46 发布

hcq29

最新推荐文章于 2024-06-25 08:54:46 发布

阅读量382

点赞数

分类专栏： Vue.js 文章标签： vue v-if v-for v-show

本文链接：https://blog.csdn.net/weixin_42339197/article/details/94627179

版权

Vue.js 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

v-if、v-show、v-for指令

1、创建模板

这三个指令是Vue中常见的指令，首先先创建一个最基础的模板：

<!DOCTYPE html>
<html lang='en'>
<head>
	<meta charset="utf-8">
	<title>v-if、v-show、v-for指令</title>
</head>
<body>
	<div id="app"> 
	    <div>hello world</div>
	    <button>按钮</button>
	</div>



	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({ 
			el :'#app'
		})
	</script>

</body>
</html>

在页面上，定义一个div标签，他显示的内容是hello world，在下面再定义一个button。页面效果如图所示。

2、v-if、v-show效果实现

下面我想做一个事情，当点击按钮时hello world就消失，再点击一次再显示出来。如果是显示，点击按钮，就会消失，如果没显示，点击按钮就会出现。这个时候，我们需要借助v-if或者v-show。

在Vue的实例里面定义一个数据为show，他的默认值为true

var app = new Vue({ 
    el :'#app',
    data: {
        show: true
    }
})

在div标签里面加上一个指令v-if，值为数据项show。只有show为true，hello world存在，show为false时，hello world就消失。

在按钮上绑定一个事件为handleClick，于语法为@click="handleClick"（在这里使用了语法糖，将v-on:click缩写成@click，同样具有语法糖的还有v-bind:class 与:class等等）

<div id="app"> 
	<div v-if="show">hello world</div>
	<button @click="handleClick">按钮</button>
</div>

对应事件的函数定义在methods中，在handleClick函数里面，每次让show的值取当前的反就可以了。

methods: {
	handleClick: function() {
		this.show = !this.show
	}
}

注意观察标签内容的变化。

如果将v-if换成v-show会有同样的效果。

<div id="app"> 
	<div v-show="show">hello world</div>
	<button @click="handleClick">按钮</button>
</div>

但是此时的show=false时，是在对应的标签是加上css属性：display:none;

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>v-if、v-show、v-for指令</title>
</head>
<body>
	<div id="app"> 
		<div v-show="show">hello world</div>
		<button @click="handleClick">按钮</button>
	</div>


	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({ 
			el : "#app",
			data: {
				show: true
			},
			methods: {
				handleClick: function() {
					this.show = !this.show
				}
			}
		})
	</script>

</body>
</html>

3、性能选择

由此可见，表面上v-if和v-show表现的效果是一模一样的，但是仔细看，还是有差别的，当show的值为false时，用v-if会把对应的标签直接从DOM中移除，而使用show会将改标签隐藏。

选择v-show：如果需要频繁地对div或者某些元素进行展示或者隐藏，用v-show会比较合适，因为在每一次消失后不需要重新创建DOM，它的性能会相对更高一些。

选择v-if：如果显示与消失的频率不是那么大，需要做一次显示或者隐藏，那么选择v-if比较合适。

4、v-for的使用

在数据项里定义一个列表，以数组的形式展现。

data: {
	lsit: [1,2,3]
},

在页面上把数组里面的数据循环展示出来，在ul里面展现。

<div id="app">
	<ul>
		<li v-for="item in list">{{item}}</li> <!-- 或者是item of list -->
	</ul>
</div>

item of list的意思是要循环list这个数据项，每一次循环会将对应的循环项的内容放在item的变量中，循环展示list时，将item输出，具体的形式为{{item}}

为提高每一项循环渲染的效率或性能，需要用到:key=""，这里需要注意的是，key需要每一项都不相同，因此可以使用每一项的索引作为key值。

<div id="app">
	<ul>
		<li v-for="(item, index) in list" :key="index">{{item}}</li>
	</ul>
</div>

完整代码：

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<title>v-if、v-show、v-for指令</title>
</head>
<body>
    <div id="app">
	    <ul>
		    <li v-for="(item, index) in list" :key="index">{{item}}</li>
	    </ul>
    </div>


	<script type="text/javascript" src="../vue.min.js"></script>
	<script type="text/javascript">
		var app = new Vue({ 
			el : "#app",
			data: {
				list: [1, 2, 3]
			}
		})
	</script>

</body>
</html>