Vuejs之路之--循环渲染

来源:互联网 发布:最好用的p2p软件 编辑:程序博客网 时间:2024/05/24 05:19

一看见循环,我们就自然就想到了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的用法

原创粉丝点击