Vuejs之路之--循环渲染

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

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

一看见循环,我们就自然就想到了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(),可以传参数,具体用法可以见下图:


更多关于该方法的信息,可以在这里做一些更深入的研究--->>filter的用法

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值