vue学习之条件渲染

v-if

当v-if绑定的值为true时，当前的内容会被渲染，否则渲染v-else指令中的内容，v-if可以单独使用

<div id="app"><p v-if="seen">hello，很高兴见到你</p><p v-else>再见</p><template v-if="ok"><h1>李白</h1><p>天生我才必有用</p></template>
</div><script>
new Vue({el: '#app',data: {seen: true,ok: true}
})
</script>

v-else-if 在 2.1.0 新增，顾名思义，用作 v-if 的 else-if 块。可以链式的多次使用

v-show

v-show只是简单地切换元素的CSS property display。如果需要非常频繁的切换，使用v-show比较好

<div id="app"><h1 v-show="ok">Hello!</h1>
</div>
<script>
new Vue({el:'#app',data: {ok: true}
})
</script>

不推荐同时使用v-if和v-for，当v-if和v-for同时使用时v-for具有比v-if更高的优先级