六、Vue学习 条件渲染 列表渲染

一、条件渲染

• 注意 不要将 v-if 和v-for 放在同一个元素使用
  可用 template 修正：

<template v-for="todo in todos" :key="todo.name">
  <li v-if="!todo.isComplete">
    {{ todo.name }}
  </li>
</template>

二、列表渲染

2.1 数组更新检测

官方参考文档

2.1.1 会改变数组

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

2.1.2 显示过滤/排序后的结果

2.1.2.1 计算属性实现

<li v-for="n in evenNumbers" :key="n">{{ n }}</li>

data() {
  return {
    numbers: [ 1, 2, 3, 4, 5 ]
  }
},
computed: {
  evenNumbers() {
    return this.numbers.filter(number => number % 2 === 0)
  }
}

2.1.2.2 计算属性不适用的情况下，如下：

<ul v-for="numbers in sets">
  <li v-for="n in even(numbers)" :key="n">{{ n }}</li>
</ul>

data() {
  return {
    sets: [[ 1, 2, 3, 4, 5 ], [6, 7, 8, 9, 10]]
  }
},
methods: {
  even(numbers) {
    return numbers.filter(number => number % 2 === 0)
  }
}

2.1.3 在template 中 使用v-for

    <ul>
      <template v-for="i in stu">
        <li>{{ i }}</li>
        <li>111111111111</li>
      </template>
    </ul>
    
  data() {
    return {
      stu: ["xxx1", "xxx2", "xx3"],
    };
  },

输出结果：

2.1.4 在组件上使用 v-for

官方参考网址，里面的一个实例 值得学习