Vue---day03---条件渲染

条件渲染

v-if

前面讲过v-if和v-else，v-else-if的用法，这里在补充一些
当有一组元素需要添加v-if指令时，为每个元素都添加v-if就会显得尤为恼火。
这时可以使用template元素

		<div id="app">
            <template v-if="ok">
                <p>hello</p>
                <br>
                <span>我们都需要v-if</span>
            </template>
        </div>
        <script>
            var vm = new Vue({
                el:"#app",
                data:{
                    ok:true
                }
            })
        </script>

这里可以看到template标签没用被渲染出来，而且将ok的值改为false之后p,br,span三个标签都将不会被渲染。

另一个和v-if差不多功用的元素就是v-show用法大致一样，但是不同的是v-show不支持template和v-else.且v-show始终会存在于渲染的并保留在Dom中，也就是说v-show只是简单的负责改变css property里的display属性。

v-if和v-show抉择

正如v-if展示的那样，当v-if后面的是false时，则不会执行任何操作，但是一旦状态变为true则会开始渲染加载v-if所包含的内容，这意味着更大的切换开销，而v-show则是，无论结果如何一开始就会渲染，而根据display的属性来决定是不是显示在网页上，这也意味着更大的初始化开销。因此对于这两种指令的使用需要更加细致的考虑实际情况。且两种指令不分高低。

当 v-if 与 v-for 一起使用时，v-for 具有比 v-if 更高的优先级，而Vue官方文档则不推荐同时使用，除非是在for遍历时，需要通过v-if来过滤时才会有所倾向。其他时候一律不建议。