03.条件/列表渲染

3.1 v-if

• v-if指令用于条件性地渲染一块内容。这块内容只会在指令的表达式返回真值时才被渲染

  • 可以在之后添加v-else或v-else-if分支，用于在表达式返回假值时渲染内容

  • v-if如果不为真值时，其中的内容都不会构建，切换时内容会被创建/销毁，v-show相当于只是为样式添加display:none，内容还在，只是不可见

  • v-if优先级比v-for高，但不建议在同一元素上使用v-if和v-for，此时v-if读取不到v-for中定义的变量

    <h1 v-if="a">111</h1>
    <h1 v-else-if="b">111</h1>
    <h1 v-else>111</h1>

3.2 v-for

• v-for用于循环渲染元素

  • 遍历列表：语法为v-for="(item, index) in items"，其中item为当前循环的元素，index为当前索引或，items为要循环的数组，可以不提供索引index，v-for="item in items"

    • vue为数组方法提供了监听，使用这些方法可以触发视图更新，push()、pop()、shift()、unshift()、splice()、sort()、reverse()，当然也可以直接将修改后的数组结果赋值回响应式变量
    • 如果数据需要过滤后展示，可以考虑使用计算属性

  • 遍历对象：语法为v-for="(value, key) in object"，其中value为当前循环的元素，key为当前索引或，object为要循环的对象，可以不提供索引key，v-for="value in object"

  • 使用单个值作为遍历对象：v-for="item in number"，将从1开始遍历到number

    提供标识

    vue采用就地更新的方式渲染元素列表，也就是更新其中的内容，但有子组件或临时状态时，更新渲染效率可能并不高。为了方便追踪生成的元素，进行重用，可以给一个提示属性key，这个字段可以使用数字或字符串

    <template v-for="item in items" :key="item.id">
    <li>{{ item.text }}</li>
    </template>