条件渲染
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来过滤时才会有所倾向。其他时候一律不建议。