v-if与v-for、v-if与v-show

1.v-if与v-for

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中。所以，不推荐v-if和v-for同时使用。
推荐使用方式:

<div v-for="(item, $index) in data">
    {{item}}
</div>

放在计算属性遍历，或者在遍历之前筛选好

computed: {
    data: function () {
        return (item => item != 0)
    }
},
// 遍历前筛选
mounted() {
    const data = [1, 2, 4, 0]
    this.data = data.filter(item => item != 0)
}

2.v-if与v-show

v-if: show=true，页面显示。show=false，页面不显示，重新渲染时该节点不会加载。

v-show: show=true，页面显示。show=false，页面不显示，重现渲染时会加载该节点，但是display设置为none。

<div v-if="show"></div>

<div v-show="show"></div>