这是我参与「第四届青训营 」笔记创作活动的的第6天
V-for 列表渲染指令
Vue提供了v-for列表渲染指令,用来辅助开发者基于一个数组来循环渲染一个列表结构。
v-for指令需要使用item in items形式的特殊语法,其中:
- items 是待循环的数组
- item 是被循环的每一项
v-for指令中有一个可选的第二个参数,当前的索引index,使用方法为(item,index) in items
代码示例如下
<div v-for='(item,index) in items'>
<div>name:{{item.name}}</div>
<div>index:{{index}}</div>
</div>
注意
item和index可以被子元素访问,也可以被自身访问
官方建议,只要用到v-for指令,那么一定要绑定一个:key属性,而且尽量把id作为key的值
对key的值类型有要求,只能是字符串或是数字,key值不允许重复,否则会报错
key的注意事项
- key的值只能是字符串或数字类型
- 必须具有唯一性
- 建议用数据项的id作为key的值
- 使用index作为key无任何意义(index不唯一)
过滤器(ilters)
常用于文本的格式化。过滤器可以用在两个地方:插值表达式和v-bind属性绑定。
过滤器加在表示式尾部,通过管道符进行调用
<p>{{message|toUpper}}</p>
在{{}}中使用管道符调用toUpper函数,对message进行格式化处理
全局过滤器
在filters节点下定义的过滤器,称为“私有过滤器”,因为它只能在当前vue实例中使用
若需要多个vue实例之间共享过滤器,则可以按照如下的格式定义全局过滤器:
Vue.filter('toUpper',(str)=>{
return 具体处理函数;
})
连续使用多个过滤器
<p>{{message|filterA|filterB}}</p>
过滤器的兼容性
过滤器只在vue2.x和1.X中受支持,而vue3.x删除了过滤器的相关的功能,可以通过计算属性或方法进行功能的替代。