vue列表渲染

v-for

我们可以用v-for指令基于一个数组来渲染一个列表. v-for指令需要使用 item in items形式的特殊语法, 其中items是源数据数组, 而item则是被迭代的数组元素的别名

也可以用of替代in作为分隔符
v-for 可以接受整数, 它会将模板重复对应次数
v-for 的对象也可以是一个计算属性或一个方法
可以在<template>元素上使用 v-for
不推荐在同一个元素上直接使用 v-for 与 v-if, v-for 的优先级高于 v-if

遍历数组

items 遍历源数据
item 遍历项
index 索引值

<template>
  <div class="hello">
    <h1>滴滴搭</h1>
    <ul>
      <li v-for="(item, index) in items" :key="item">{{ item }}</li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        items: ['html', 'css', 'js', 'vue', 'react']
      }
    }
  }
</script>

遍历对象

遍历对象会按照 Object.keys() 的结果遍历

objs 源数据对象
key 键
val 值
index 索引

<template>
  <div class="hello">
    <h1>滴滴</h1>
    <ul>
      <li v-for="(val, key, index) of objs" :key="key">
        {{ index }}-{{ key }}-{{val}}
      </li>
    </ul>
  </div>
</template>

<script>
  export default {
    name: 'HelloWorld',
    data() {
      return {
        objs: {
          name: 'Ginger',
          age: 24
        }
      }
    }
  }
</script>

维护状态

Vue 在使用 v-for 渲染元素列表时, 如果数据项顺序发生改变, Vue 将不会移动 DOM 元素来匹配数据项的顺序, 而是就地更新每个元素, 并且确保他们每个索引位置正确渲染.
为了使 Vue 能跟踪每个节点的身份, 从而重用和重新排序现有元素, 我们需要为每项提供一个唯一的 key 属性

不推荐使用对象或数之类的非基本类型值作为 v-for 的 key, 推荐使用字符串或数值类型

1
2
3

<div v-for="item in items" v-bind:key="item.id">
  <!-- 内容 -->
</div>

数组更新检测

变异方法

Vue 将被侦听的数组的编译方法进行了包裹, 所以他们也将会触发试图更新

push()
pop()
shift()
unshift()
splice()
sort()
reverse()

替换数组

Vue 除了提供变异方法外, 还提供了非变异方法, 他们不会改变原始数组, 而总是返回一个数组

filter()
concat()
slice()

注意事项

由于 JavaScript 限制, Vue 不能检测以下数组变动

利用索引直接修改数组某一项时
修改数组长度时

Set 方法

为了解决无法检测到数组变动的问题, Vue 提供了以下两个方法, 或者使用其他变异方式等进行处理

Vue.set()
vm.$set()

对象变更检测

由于 JavaScript 限制, Vue 不能检测对象属性的添加或删除
对于已创建的 Vue 实例, Vue 不允许动态添加根级别的响应式属性, 但是可以用 Vue.set(object, propertyName, value) 方法向嵌套对象添加响应式属性

var vm = new Vue({
  el: 'app',
  data: {
    obj: {
      name: 'ginger'
    }
  }
})
// 添加单个属性
vm.$set(vm.obj, 'age', 18)
// 添加多个属性
vm.obj = Object.assign({}, vm.obj, {
  gender: 0
  address: 'China'
})

在组件上使用 v-for

我们可以在任何自定义组件上使用 v-for 但是我们必须定义 key
如果要将遍历内容数据传递到组件内, 需要使用 props