Vue-条件渲染和循环渲染

最新推荐文章于 2024-08-15 19:41:48 发布

blag_

最新推荐文章于 2024-08-15 19:41:48 发布

阅读量790

点赞数

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

本文链接：https://blog.csdn.net/qq_64067728/article/details/126629938

版权

本文介绍了Vue.js中的条件渲染（v-if与v-show的区别）和循环渲染（v-for的使用）。v-if通过移除元素实现隐藏，速度较慢但节省内存；v-show通过设置样式隐藏，速度快但持续占用内存。循环渲染使用v-for，结合:key解决Vue2.0中动态添加元素的绑定问题。

摘要由CSDN通过智能技术生成

1、条件渲染

条件渲染一共有两个v-if 和 v-show

当设置为false时，他们都会使对应标签在浏览器中消失，true的时候都会出现，

而两个条件渲染方法，虽然都是让标签在浏览器中消失，却有所不同。

如：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/2.6.14/vue.js"></script>		
		
	</head>
	<body>
		<div id="app">
			<button @click="change1">开关</button>
			<div v-if="flag">hello</div>
			<div v-show="flag">hello2</div>
	
		</div>
		<script>
			new Vue({
				el:"#app",
				data:{
					n:0,
					n2:true,
					flag:true
				},
				methods:{
					change1(){ 
						this.flag=!this.flag
					}
				}
			})
			
			
			
			
		</script>
	</body>
</html>