v-for 遍历数组
渲染一组数据的时候用 v-for
v-for 的语法类似于 JavaScript 中的 for 循环
格式如下: item in items 的形式
我们来看一个简单的案例:
如果在遍历的过程中不需要使用索引值
v-for="movie in movies"
依次从 movies 中取出 movie, 并且在元素的内容中, 我们可以使用 Mustache 语法, 来使用 movie
如果在遍历的过程中, 我们需要拿到元素在数组中的索引值呢?
语法格式: v-for=(item, index) in items
其中的 index 就代表了取出的 item 在原数组的索引值.
v-for 可以用户遍历对象:
比如某个对象中存储着你的个人信息, 我们希望以列表的形式显示出来.
nitem 是数组的遍历
index 是数组的索引
可以用其它的参数代替, 但是在后面也得写成一样的参数, 尽量避免命名的冲突
更改数组
不能通过索引的方式更改数组, 这样不会渲染页面
不能通过更改长度的方式更改数组, 也不会渲染页面
检测数组更新
因为 Vue 是响应式的, 所以当数据发生变化时, Vue 会自动检测数据变化, 视图会发生对应的更新.
Vue 中包含了一组观察数组编译的方法, 使用它们改变数组也会触发视图的更新.
- push()
- pop()
- shift()
- unshift()
- splice()
- sort()
- reverse()
obj: (value,key,index) in obj
value 对象的 value 值
key 对象的 key 值
index 对象的索引
更改对象
向对象内添加或者删除属性不会渲染页面
$set(); 三个属性, 改的对象 key 值 value 值
- Object.defineProperty
- num:num is number
从 1 开始遍历到这个数字
String
遍历字符串的全部字母
key 属性
只能用在 Array 和 string 中, 值是唯一的
vue 不会去改变原有的元素和数据, 而是创建新的元素然后把新的数据渲染进去
在使用 v-for 的时候, vue 里面需要我们给元素添加一个 key 属性, 这个 key 属性必须是唯一的标识
给 key 赋值的内容不能是可变的
在写 v-for 的时候, 都需要给元素加上一个 key 属性
key 的主要作用就是用来提高渲染性能的!
key 属性可以避免数据混乱的情况出现 (如果元素中包含了有临时数据的元素, 如果不用 key 就会产生数据混乱)
来源: http://www.bubuko.com/infodetail-3446904.html