vue学习笔记---(3)条件渲染(v-if && v-show)以及列表渲染(v-for)

1.条件渲染

1. v-if
   • 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候被渲染。
2. v-show
   • 用于条件性地渲染一块内容。这块内容只会在指令的表达式返回 truthy 值的时候展示。
   • 带有 v-show 的元素始终会被渲染并保留在 DOM 中。v-show 只是简单地切换元素的CSS属性display。

v-if 是“真正”的条件渲染，因为它会确保在切换过程中条件块内的事件监听器和子组件适当地被销毁和重建。

v-if 也是惰性的：如果在初始渲染时条件为假，则什么也不做——直到条件第一次变为真时，才会开始渲染条件块。

相比之下，v-show 就简单得多——不管初始条件是什么，元素总是会被渲染，并且只是简单地基于 CSS 进行切换。

一般来说，v-if 有更高的切换开销，而 v-show 有更高的初始渲染开销。因此，如果需要非常频繁地切换，则使用 v-show 较好；如果在运行时条件很少改变，则使用 v-if 较好。

<template>
  <div>
    <button @click="changeFlag">点我改变flag</button>
    <div>鼠鼠的好朋友是:
      <strong v-show="flag === 0">小鱼</strong>
      <strong v-show="flag === 1">大水牛</strong>
      <strong v-show="flag === 2">小青蛙</strong>
    </div>
    <div>鼠鼠是:
      <strong v-if="flag === 0">海绵宝宝</strong>
      <strong v-else-if="flag === 1">派大星</strong>
      <strong v-else>章鱼哥</strong>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Demo4',
  data() {
    return {
      flag: 0,
    }
  },
  methods: {
    changeFlag() {
      this.flag = this.flag === 2 ? 0 : ++this.flag
    },
  },
}
</script>

Demo.vue---页面渲染展示

2. 列表渲染

• v-for 指令基于一个数组来渲染一个列表。v-for 指令需要使用 item in items 形式的特殊语法，其中 items 是源数据数组，而 item 则是被迭代的数组元素的别名。
  Demo.vue---页面渲染展示

<template>
  <div>
    <ul>
      <li v-for="person in personList" :key="person.id">
        {{person.name}}---{{person.age}}
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'Demo5',
  data() {
    return {
      personList: [
        {id: 001, name: '小青蛙', age: 998},
        {id: 002, name: '小牛马', age: 888},
        {id: 003, name: '章鱼哥', age: 98}
      ]
    }
  },
}
</script>

---

注意点

1. v-for和v-if同时使用 — vue2

• 避免 v-if 和 v-for 用在一起
• 永远不要把 v-if 和 v-for 同时用在同一个元素上。
  • 原因：v-for的执行优先比v-if要高 , 所以即使只是渲染列表的部分数据，也会每一次都循环全部数据，极大的的浪费性能

官网对于v-for和v-if同时使用的风格指南

2. 在v-for中使用key的必要性

• key 的特殊 attribute 主要用在 Vue 的虚拟 DOM 算法，在新旧 nodes 对比时辨识 VNodes。如果不使用 key，Vue 会使用一种最大限度减少动态元素并且尽可能的尝试就地修改/复用相同类型元素的算法。而使用 key 时，它会基于 key 的变化重新排列元素顺序，并且会移除 key 不存在的元素。
• 用index作为key可能引起的问题:
  • 若对数据进行：逆序添加、逆序删除等破坏顺序操作:会产生没有必要的真实DOM更新 ==> 界面效果没问题, 但效率低。
  • 如果结构中还包含输入类的DOM： 会产生错误DOM更新 ==> 界面有问题。
  • 如果不存在对数据的逆序添加、逆序删除等破坏顺序操作， 仅用于渲染列表用于展示，使用index作为key是没有问题的。
• 开发中怎么选择key？
  • 最好使用每条数据的唯一标识作为key, 比如id、手机号、身份证号、学号等唯一值。