3.v-if,v-show,v-for 指令

最新推荐文章于 2025-07-06 22:36:32 发布

原创最新推荐文章于 2025-07-06 22:36:32 发布 · 861 阅读

0 ·

CC 4.0 BY-SA版权

vue2.5入门专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了Vue.js中的v-if、v-show和v-for指令的使用方法。v-if用于条件渲染，当属性为false时，将从DOM中删除元素；v-show则在属性为false时隐藏元素而不移除；v-for用于循环渲染列表数据，建议使用唯一key提升渲染效率。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>v-if,v-show,v-for 指令</title>
		<!-- v-if: 当属性是false时，直接从dom中删除标签
		v-show: 当属性是false时，隐藏当前标签
		v-for: 循环展示一个list数据 -->
		<script src="./vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="root">
			<div v-if="show">
				hello world
			</div>
			<button @click="handleClick">toggle</button>
			<ul>
				<!-- <li v-for="item of list" >{{item}}</li> -->
				<li v-for="(item,index) of list" :key="index">{{item}}</li>
				<!-- 在使用v-for时最好添加一个key，这样可以提高页面渲染速度，且key值要保持唯一不重复-->
			</ul>
		</div>
		<script type="text/javascript">
			new Vue({
				el: "#root",
				data:{
					show:true,
					list: [1,1,3]
				},
				methods:{
					handleClick: function(){
						this.show = !this.show;
					}
				}
			})
		</script>
	</body>
</html>