vue 条件渲染 v-if和v-show 及二者比较

一．条件渲染

用来控制元素是否可见

①v-if
②v-show

二．

１.v-if
①根据表达式的值在dom中渲染或销毁元素或组件。
②v-if后面跟的是条件，boolean值，当为false时，对应的元素及其子元素不会渲染，也就是根本没有对应的标签出现在dom.
③v-if和v-else-if，v-else连用的时候，该结构不能被打断
【 v-if、v-else-if 、v-else的和if、 if-else、else 类似，顺序执行时，当遇到符合条件的则下边的代码就不会再执行】
v-if=”表达式“
v-else-if=”表达式“
v-else=”表达式“

２.v-show
①v-if当条件为false，是不会有对应的元素的dom；
v-show条件为false，仅仅是将元素添加一个行内样式，display属性设置none

３.二者比较
①v-show首次渲染开销大于v-if，因为不管v-show的条件是什么，元素都会渲染出来，只不过通过css样式设置显隐藏；
②当需要显示与隐藏之间切换很频繁，建议使用v-show，而较少切换时，建议使用v-if；
③v-if可以和template使用，而v-show则不支持

eg: v-if和template一起使用的作用效果

    <div id="app">
        <div v-if="number==0">
            <span>123</span>
        </div>
        <hr />
        <template v-if="number==0">
            <span>234</span>
        </template>
    </div>
    <script src="js/vue.js"></script>
    <script>
        new Vue({
            el: '#app',
            data() {
                return {
                    number: 0
                }
            }
        })
    </script>

效果图：【不会有多余的标签，结构较为简洁】