为什么v-for与v-if不要一起用（解决方法）

不连用的原因

    <div id="app">
        <div v-for="(item, i) in list" :key="i" v-if="item.a > 1">{{ item.a }}</div>
        <!-- 相当于
        <div v-if="false">1</div>   v-for循环后在运行v-if，先渲染所有项，再移除v-if为false的元素
        <div v-if="true">2</div>
        <div v-if="true">3</div> -->
    </div>
// 由于 v-for 的优先级比 v-if 的优先级高，所以会把所有的div都渲染出来，在进行v-if的判断，渲染了不必渲染的元素，也就浪费了性能
    

    <script>
        new Vue({
            el: "#app",
            data: {
                list: [{
                    a: 1
                }, {
                    a: 2
                }, {
                    a: 3
                }]
            }
        })
    </script>

解决方法

 如果是对一组数据中的某个值不展示，则可以使用计算属性(把数据过滤一遍)
    <div id="app">
        <div v-for="(item, i) in getData" :key="i" v-if="item.a > 1">{{ item.a }}</div>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                flag: Math.floor(Math.random() * 10),
                list: [{
                    a: 1
                }, {
                    a: 2
                }, {
                    a: 3
                }]
            },
            computed: {
                getData() {
                    const res = this.list.filter(item => {
                        return item.a > 1;
                    });
                    return res;
                }
            }
        })
    </script>

如果是对整个数据的显示和隐藏，则可以使用template
    <div id="app">
         <template v-if="flag">
            <div v-for="(item, i) in list" :key="i">{{ item.a }}</div>
        </template>
    </div>

    <script>
        new Vue({
            el: "#app",
            data: {
                flag: true,
                list: [{
                    a: 1
                }, {
                    a: 2
                }, {
                    a: 3
                }]
            }
        })
    </script>