Vuejs之路之--循环渲染

最新推荐文章于 2025-03-12 10:31:25 发布

原创最新推荐文章于 2025-03-12 10:31:25 发布 · 2.1k 阅读

0 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#v-for #循环

javacsript 同时被 2 个专栏收录

29 篇文章

订阅专栏

Vue

16 篇文章

订阅专栏

本文详细介绍了Vue.js中v-for指令的使用方法，包括基本语法、数组与对象的遍历方式、使用key属性提高性能、数组更新检测及重塑数组等高级用法，并探讨了v-for与v-if结合使用的场景。

一看见循环，我们就自然就想到了for循环，所以这里讲的就是v-for的故事,废话少说--

总结之：

1.其实v-for的语法格式为v-for = item in（of）items，在这里items可以是数组，对象等等，item是子自己定义的，表示items中的元素或者子项；
2.源数据是数组的话，还可以 v-for = (item,[index]) in（of） items 在这里index表示元素的下标，index是可选的；
3.源数据是对象的话，还可以 v-for = (item,[key],[index]) in (of) items 在这里key代表的是属性的键，item表示的对应的值，key和index都是可选的
4.如果源数据是数字，那么利用v-for的时候其中item就代表小于从零开始小于这个数字的数字，
5.可以用在template元素上；
6.当它们处于同一节点， v-for 的优先级比 v-if 更高,也就是说在v-for中的每一项都会执行v-if,你想为仅有的一些项渲染节点时，这种优先级的机制会十分有用，

比如这样：

		<ul>
			<li v-for = "item in dataif" v-if = "item.jud">{{item.fir}}</li>
		</ul>

JS部分

dataif:{
					is:{
						fir:"我会出现",
						jud:true
					},
					isw:{
						fir:"我会出现的啦",
						jud:true
					},
					isf:{
						fir:"我将不会出现的啦",
						jud:false
					}
				}

可见在这里只会出现的item.jud为真的时候的对应的值......

key

为了让vuejs能够跟踪每个节点的身份，从而重用和重新排序现有元素，需要为每项提供一个唯一 key 属性，工作方式类似于一个属性（说实话就是一个识别码）

数组的更新和检测

在这个模块中，包含一些晓得模块--

1.变异方法--主要介绍了数组的一些js中的常用的方法，之所以说是变异，是因为这些放方法操作原数组.当然也有些非变异方法，这里就不做详述了。

2.重塑数组--为啥叫重塑，在这里就是通过非变异方法操作数组生成的新数组赋值给源数组即可,也叫重塑。

3.显示过滤/排序后的效果--根据计算属性，过滤器，和methods中定义的方法即可；

附：

在这里竟然碰到了数组中的另一个方法：数组.filter(),可以传参数,具体用法可以见下图：