Vuejs之路之--循环渲染

本文详细介绍了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(),可以传参数,具体用法可以见下图:


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

Vue.js 是一个流行的前端框架,提供了一种简单而强大的方式来处理动态渲染页面。v-for 是 Vue.js 中最常用的指令之一,用于循环渲染列表数据。下面我们就来详解一下 Vue.js 中的 v-for 指令。 ## v-for 指令 v-for 指令可以循环渲染一个数组或对象的属性,它的语法格式如下: ```html <div v-for="(item, index) in items" :key="index">{{ item }}</div> ``` 上面的代码中,items 是一个数组,v-for 指令会将数组中的每个元素渲染成一个 div 元素。在循环过程中,item 和 index 分别表示数组的元素和索引。 其中,:key 是必须的属性,用于给每个渲染出的元素指定一个唯一的标识符,以便 Vue.js 能够跟踪每个元素的状态变化。 在 v-for 指令中,还可以使用对象的属性进行循环渲染: ```html <div v-for="(value, key) in object" :key="key">{{ key }}: {{ value }}</div> ``` 上面的代码中,object 是一个对象,v-for 指令会将对象的每个属性渲染成一个 div 元素。在循环过程中,value 和 key 分别表示对象的属性值和属性名。 ## v-for 嵌套 在 Vue.js 中,v-for 指令可以嵌套使用,实现更复杂的渲染效果。例如,可以循环渲染一个二维数组: ```html <div v-for="row in matrix" :key="row[0]"> <div v-for="cell in row" :key="cell">{{ cell }}</div> </div> ``` 上面的代码中,matrix 是一个二维数组,v-for 指令会将每一行渲染成一个 div 元素,然后在每行中再循环渲染每个元素,即每个单元格渲染成一个 div 元素。 ## v-for 和 v-if 结合使用 在 Vue.js 中,v-for 指令和 v-if 指令可以结合使用,实现更灵活的渲染效果。例如,可以根据条件过滤渲染的元素: ```html <div v-for="item in items" v-if="item.visible" :key="item.id">{{ item.name }}</div> ``` 上面的代码中,items 是一个数组,v-for 指令会将数组中的每个元素渲染成一个 div 元素。在渲染过程中,只有 visible 属性为 true 的元素才会被渲染。 ## 总结 v-for 指令是 Vue.js 中常用的指令之一,用于循环渲染列表数据。在使用 v-for 指令时,需要注意给每个渲染出的元素指定一个唯一的标识符,以便 Vue.js 能够跟踪每个元素的状态变化。另外,v-for 指令还可以嵌套使用,实现更复杂的渲染效果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值