举个案例: 循环 data 中的 list 的值在 div 中, 并显示相应的 index 值.
关于数组的循环:
// 显示效果如下图:
- // 一般的列表渲染最好带一个 key 值, 要把 key 值设置为唯一值的话, 可以选择 index. 但在频繁操作 DOM 元素相对应的数据的时候, 它还是有点浪费性能, 可能让 vue 没法充分复用 DOM 节点, 所以不太建议用 index 来做 key 值
- // 所以一般的项目中的后端会传递过来一些数据, 这些数据可以把它作为 key 值来使用(一般会携带一个后端或数据库相关的一个唯一的数据条目标识符, 例如: id)
- // 修改如下图所示:
- // 把 key 值设置成 (item.id) 既是唯一的, 同时又不是 index 下标, 就能保证 key 值的使用最终是正确的, 性能上最高
- // 在使用 key 值的时候, 每个循环项最好带一个 key 值, 提高性能; 为了让 key 值达到最优效果, 就要把 key 设为唯一的, 尽量不用 index 下标作为 key 值
- ===============================================================
接下来讲解一下: 如何动态的往列表里添加内容
// 如上, 运用数组中的 push()方法, 当往数组里添加内容的时候页面会自动的响应出增加的内容
- // 如上, 当直接用下标的方法来添加数组内容的时候, 页面上并没有把添加的数据显示出来. 然后在控制台中输入 vm.list 来查看数据的时候, 发现里面是有数据的添加的, 只是没有显示在页面上而已
- // 总结: 当我们去尝试更改数组里面的内容的时候, 不能直接通过下标的形式来改变数组; 只能通过 Vue 提供的几个数组变异方法来操作数组, 才能够实现数据变化, 页面也跟着变化
Vue 中一共提供了 7 种数组的变异方法: pop(把数组最后一项删除掉),push(往数组里增加一条),shift(删除数组里的第一项),unshif(往数组里的第一项增加内容),splice(数组的截取 / 操作方法),sort(对数组进行排序),reverse(对数组进行取反)
// 接下来讲解一下: 把页面上的数据 George 修改为 Rose
方法一: 改变数组的内容
// 用 splice()的方法来改变 Gerorge, 表达式中写入 (1,1,{id:'001',text:'Rose'}) 即可. 表达式中第一个 1 表示数组中的第一项 (即 list[1]), 第二个 1 表示删除一条内容,{id:'001',text:'Rose'} 表示往里增加一条内容
方法二: 改变数组中的数据引用
// 改变数据上新的引用, 直接把数据的第二项 (即 list[1] 的 text 直接修改)
若要在 div 外再循环一个 span 标签, 可以用 template 方法来实现效果, 代码如下图:
// 显示效果如下: div 和 span 标签都循环了
- // 用 template 模板占位符可以去包裹一些元素, 但是在循环的过程中, 他并不会真正的被渲染到页面上
- ==================================================
关于对象的循环:
// 显示效果如下:
- // 如上, key 值指向的就是这个对象中的键名(例: name), 而 item 值指向的就是这个对象的键值(例:'George'),index 值指向的就是它在对象中的第几个位置
- ===============================================================
接下来讲解一下: 如何动态的往列表里添加内容
- // 如上, 当改 userInfo 的 name 值时, 数据变了, 页面也跟着改变了. 而当你添加一个新的数据时, 数据有发生变化, 但是页面上并没有显示出来效果. 所以说, 当在遍历对象的时候, 直接动态的往对象里面加值是不好用的. 但是如果硬要是往里面添加的话呢, 就类似于数组一样, 直接把对象的引用赋值进去改变就行了(会比较麻烦)
- // 操作如下:
==================================================
对象中:
还可以采取另外一种方法来实现: 即 Vue.set()方法!
// 在控制台中用 set 方法也可以实现在对象中添加数据. 如: Vue.set(vm.userInfo,'address','Beijing'), 这段代码的编写, 就可以实现在页面和对象中添加一个新的数据 address 显示效果如下图:
- // 然而, Vue.set()方法不仅可以这样来使用, 还可以用 Vue 实例的方法来使用 (它既是一个 Vue 中的全局方法, 同时也是 Vue 中的实例方法)
- // 用 vm.$set(vm.userInfo,'address','Beijing')的实例方法也可以照样实现如上效果, 演示效果如下图:
===============================================================
数组中:
也可以采取另外一种方法来实现: 即 Vue.set()方法!
稍微更改一下之前的代码, 简化一下:
然后在控制台上进行 set 方法的使用, 如下图操作:
// 如上, 可以发现数组的 set 方法也是像对象的使用一样, 而且同样都可以达到效果! 其中 (vm.userInfo,1,5) 的 "1" 指的是数组的第二项(即 userInfo[1]),"5" 指的是需要修改的内容.
来源: https://www.cnblogs.com/ytraister/p/10575141.html