1.4 Vue 条件渲染和列表渲染

1. 条件渲染

v-if、v-else-if、v-else / v-show

• v-if、v-else-if、v-else与 JavaScript的条件语句if、else、else if类似，
  Vue.js的条件指令可以根据表达式的值，在DOM中渲染或销毁元素/组件；
• v-show 不管初始条件 是什么，元素总是会被渲染，并且只是简单地 基于CSS进行显示隐藏切换。
• 注意：v-else-if要紧跟v-if,v-else要紧跟v-else-if或ν-if，表达式的值为真时，当前元素/组件及所有子节点将被渲染，为假时被 移除。

        <div id="app">
            <p v-if="status === 1">当status为1 显示该行</p>
            <p v-else-if="status === 2">当status为2 显示该行</p>
            <p v-else="status === 3">当status为3 显示该行</p>
            <p v-show="status === 1">当status为1 显示该行,否则隐藏该行</p>
        </div>
        <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
        <script>
        var app = new Vue({
            el: '#app',
            data: {
                status: 1
            }
        })
        </script>

v-if使用场景

• 运行条件较少改变
• 展示带权限列表
• 可以在 template上使用

v-show使用场景

• 需要频繁切换(tab切换)
• 展示前台页面数据
• 不可以在 template上使用

2. 列表渲染

v-for

当需要将一个数组遍历或枚举一个对象循环显示时，就会用到列表渲染指令v-for。
它的表达式需结合in来使用，类似 item in items的形式。
列表渲染也支持用of来代替in作为分隔符。
v-for渲染对象：可以用v-for来遍历一个对象属性。

    <div id="app">
        <h4>数组</h4>
        <ul>
            <li v-for="item in items">{{item.name}}</li>
        </ul>
        <ul>
            <li v-for="(item,index) of items">{{item.name}}</li>
        </ul>
        <hr>
        <h4>对象</h4>
        <ul>
            <li v-for="item in obj">{{item}}</li>
        </ul>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
    let app = new Vue({
        el: '#app',
        data: {
            items: [
                {name: 'test1'},
                {name: 'test2'},
                {name: 'test3'},
                {name: 'test4'},
                {name: 'test5'}
            ],
            obj: {
                name: 'yin',
                age: 18,
                country: 'china'
            }
        }
    })
    </script>

维护状态

为了给Vue一个提示,以便它能跟踪每个节点的身份,从而重用和重新排序现有元素,你需要为每项提供一个唯一key属性

    <div id="app">
        <ul>
            <li v-for="item in items">{{item.name}}</li>
        </ul>
        <ul>
            <li v-for="item in items" v-bind:key="item.name">{{item.name}}</li>
        </ul>
        <button @click="addList">数组添加元素</button>
    </div>
    <script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
    <script>
    let app = new Vue({
        el: '#app',
        data: {
            items: [
                {name: 'test1'},
                {name: 'test2'},
                {name: 'test3'},
                {name: 'test4'},
                {name: 'test5'}
            ]
        },
        methods: {
            addList() {
                this.items.unshift({name: 'test0'})
            }
        }
    })
    </script>

效果图
带key只会变动那个添加的节点，不会全部更新，提高性能

列表渲染

1. Vue将被侦听的数组的变异方法进行了包裹，所以它们也将会触发视图更新，被包裹过的方法有：push()，pop()，shift()，unshift()，splice()，sort()， reverse()；
2. 当使用非变异方法时，可以用新数组替换旧数组，涉及方法有 filter()、concat()和slice()
3. 两种情况不能监听：当利用索引直接设置一个数组项时；当修改数组的长度时。

var vm = new Vue({
    data: {
        items: ['a', 'b', 'c']
    }
})
vm.items[1] = 'x' // 不是响应性的
vm.items.length = 2

显示过滤/排序的结果

如果想要显示一个数组经过过滤或排序后的版本,而不实际改变或重置原始数据，可以创建一个计算属性，来返回过滤或排序后的数组

<div id="app">
    <ul>
        <li v-for="n in eventNumbers">{{n}}</li>
    </ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.10/vue.min.js"></script>
<script>
let app = new Vue({
    el: '#app',
    data: {
        numbers:[1, 2, 3, 4, 5]
    },
    computed: {
        evenNumbers: function () {
            return this.numbers.filter((number) {
                return number % 2 === 0
            })
        }
    }
})
</script>

template上使用v-for

可以利用带有v-for的<template>来循环渲染一段包含多个元素的内容

<ul>
    <template v-for="item in items">
        <li>{{item.msg}}</li>
        <li class="divider" role="presentation"></li>
    </template>
</ul>

注意事项

• 不推荐同时使用v-if和v-for
  同时使用时，v-for具有比v-if更高的优先级；这样先渲染完之后再判断删除，性能上不是很好
• 列表渲染给每项加上key
  Vue出于效率考虑，会尽可能地复用已有的元素而非重新渲染，加上key有助于优化性能