前端框架vue.js系列（2）：条件v-if/v-show与循环v-for

最新推荐文章于 2022-10-09 19:46:31 发布

黄泽平

最新推荐文章于 2022-10-09 19:46:31 发布

阅读量756

点赞数 3

分类专栏：前端集合 vue 文章标签： vue v-for v-if v-show

本文链接：https://blog.csdn.net/zeping891103/article/details/78109546

版权

前端集合同时被 2 个专栏收录

153 篇文章 10 订阅

订阅专栏

vue

14 篇文章 6 订阅

订阅专栏

条件

通常用于显示隐藏，使用v-if或v-show实现。v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下， v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说， v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件不太可能改变，则使用 v-if 较好。demo：

<body>
	<!-- 结果显示为456 -->
	<div id="app">
		<h1 v-if="ok==1">123</h1>
		<h1 v-else-if="ok==2">456</h1>
		<h1 v-else>789</h1>
		<h1 v-show="false">hello</h1>
	</div>
</body>

<script>
	var vue = new Vue({
		el: "#app",
		data: {
			ok: 2
		},
		methods: {},
		filters: {},
		computed: {},
		watch: {}
	});
</script>

循环

使用v-for指令实现，如果条件允许下，尽可能绑定上key作为唯一值，以便它能跟踪每个节点的身份，从而重用和重新排序现有元素，如:key="item.id"。当一个元素标签内同时存在v-for和v-if时，v-for的优先级要高于v-if。v-for循环主要有以下几种情况：

正常循环item in items，其中items为数组：

<li v-for="item in worditems" :key="item.id">{{item.id}}：{{item.v}}</li>

<script>
	new Vue({
		el: "#app",
		data: {
			worditems: [{
				id: "id1",
				v: "a"
			}, {
				id: "id2",
				v: "b"
			}]
		}
	});
</script>

循环加索引(item,index) in items，其中items为数组：

<li v-for="(item,index) in worditems" :key="item.id">{{index}}：{{item.id}}：{{item.v}}</li>

<script>
	new Vue({
		el: "#app",
		data: {
			worditems: [{
				id: "id1",
				v: "a"
			}, {
				id: "id2",
				v: "b"
			}]
		}
	});
</script>

对象循环3种情况：value in object、(value,key) in object、(value,key,index) in object，object为对象。

<li v-for="value in object">{{value}}</li>
<li v-for="(value,key) in object">{{key}}：{{value}}</li>
<li v-for="(value,key,index) in object">{{index}}：{{key}}：{{value}}</li>

<script>
	new Vue({
		el: "#app",
		data: {
			object: {
				k_a: "v_1",
				k_b: "v_2",
				k_c: "v_3"
			}
		}
	});
</script>

整数循环n in 5：

<li v-for="n in 5">{{n}}</li>

组件循环，值通过props传递到组件内：

<my-componen v-for="(item,index) in worditems" :key="item.id" :i="index" :v="item.v"></my-componen>

<script type="text/x-template" id="myli">
	<li>{{i}}：{{v}}</li>
</script>

<script>
	Vue.component("my-componen", {
		props: ["i", "v"],
		template: "#myli"
	});

	var vue = new Vue({
		el: "#app",
		data: {
			worditems: [{
				id: "id1",
				v: "a"
			}, {
				id: "id2",
				v: "b"
			}]
		}
	});
</script>

注意，由于JavaScript 的限制， vue不能检测以下变动，即改变时不支持数据同步绑定至界面显示：
1.vm.items[indexOfItem] = newValue。解决办法：可以使用vm.items.splice(indexOfItem, 1, newValue)
2.vm.items.length = newLength。解决办法：直接截取vm.items.splice(newLength)

有时，我们想要显示一个数组的过滤或排序副本，而不实际改变或重置原始数据。通过methods添加处理方法,此操作仅限于过滤，不可改变数组内对象的值。

<li v-for="n in even(numbers)">{{n}}</li>

<script>
	var vue = new Vue({
		el: "#app",
		data: {
			numbers: [1, 2, 3, 4, 5]
		},
		methods: {
			even: function(numbers) {
				return numbers.filter(function(number) {
					return number % 2 === 0
				})
			}
		}
	});
</script>

如果在循环前你必须改变数组对象的值，请先改变后，在加入到循环表达式中。

黄泽平

关注

3
点赞
踩
12

收藏

觉得还不错? 一键收藏
1
评论
前端框架vue.js系列（2）：条件v-if/v-show与循环v-for

条件通常用于显示隐藏，使用v-if或v-show实现。v-if 是真正的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做，直到条件第一次变为真时，才会开始渲染条件块。相比之下， v-show 就简单得多，不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。一般来说， v-if ...
复制链接

扫一扫

专栏目录