Vue基础之Vue列表渲染
来源:互联网 发布:云计算 国家政策汇总 编辑:程序博客网 时间:2024/05/01 13:46
列表渲染
我们用 v-for 指令根据一组数组的选项列表进行渲染。 v-for 指令需要以 item in items 形式的特殊语法, items 是源数据数组并且 item 是数组元素迭代的别名
基本用法:
在 v-for 块中,我们拥有对父作用域属性的完全访问权限。 v-for 还支持一个可选的第二个参数为当前项的索引
你也可以用 of 替代 in 作为分隔符,因为它是最接近 JavaScript 迭代器的语法
对象迭代 v-for:
你也可以用 v-for 通过一个对象的属性来迭代
你也可以提供第二个的参数为键名
第三个参数为索引
整数迭代 v-for:
v-for 也可以取整数。在这种情况下,它将重复多次模板
结果
组件 和 v-for:
在自定义组件里,你可以像任何普通元素一样用 v-for
然而他不能自动传递数据到组件里,因为组件有自己独立的作用域。为了传递迭代数据到组件里,我们要用 props
不自动注入 item 到组件里的原因是,因为这使得组件会紧密耦合到 v-for 如何运作。在一些情况下,明确数据的来源可以使组件可重用
key:
为了给 Vue 一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一 key 属性。理想的 key 值是每项都有唯一 id。这个特殊的属性相当于 Vue 1.x 的 track-by ,但它的工作方式类似于一个属性,所以你需要用 v-bind 来绑定动态值
数组更新检测:
变异方法:会改变原始数组,且会触发视图更新
push、pop、shift、unshift、splice、sort、reverse
重塑数组:不会改变原始数组,总是返回一个新数组
filter、concat、slice
显示过滤/排序结果:
有时,我们想要显示一个数组的过滤或排序副本,而不实际改变或重置原始数据。在这种情况下,可以创建返回过滤或排序数组的计算属性
例如
只要number被修改,则会出发计算属性eventNumbers进行计算
- Vue基础之Vue列表渲染
- Vue基础(列表渲染)
- Vue基础之Vue条件渲染
- Vue.js 学习(6) -- Vue指令之:列表渲染
- Vue基础:条件渲染、列表渲染、事件处理
- vue之页面渲染
- Vue的列表的渲染
- vue列表页渲染优化
- vue 列表渲染双向绑定
- 【Vue】 -(6) 条件渲染和列表渲染
- Vue.js笔记-条件渲染 列表渲染
- 8-Vue指令之列表渲染 V-for
- Vue基础(条件渲染)
- Vue基础之Vue实例
- Vue 监听列表item渲染事件
- Vue.js教程6-列表渲染
- Vue.js中的列表渲染:v-for
- vue.js使用列表渲染的坑
- Android动画效果之Frame Animation(逐帧动画)
- js的变量提升和函数提升
- zookeeper-zkui
- 安卓平台获取Mac地址
- 请慎用java的File#renameTo(File)方法
- Vue基础之Vue列表渲染
- C#扫雷游戏
- 增量式PID控制算法
- ef笔记
- String,Stringbuffer,StringBulider区别
- cxf_webservice 获取客户端mac和ip
- ByteBuf的源码分析
- 需求调研的“七种武器”
- 如何生成git的公钥和私钥