Vue004_条件渲染
生活随笔
收集整理的這篇文章主要介紹了
Vue004_条件渲染
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
條件渲染
條件渲染指令
1) v-if 與v-else
2) v-show
比較v-if 與v-show
3) 如果需要頻繁切換v-show 較好
4) 當條件不成立時, v-if 的所有子節點不會解析(項目中使用)
?
代碼展示
<!DOCTYPE html> <html><head><meta charset="utf-8"><title></title></head><body><div id="demo"><h2 v-if="ok">表白成功</h2><h2 v-else>表白失敗</h2><h2 v-show="ok">求婚成功</h2><h2 v-show="!ok">求婚失敗</h2><br><button @click="ok=!ok">切換</button></div><script type="text/javascript" src="js/vue.js"></script><script type="text/javascript">var vm = new Vue({el: '#demo',data: {ok: false}})</script></body> </html>結果展示
總結
以上是生活随笔為你收集整理的Vue004_条件渲染的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： Vue003_class 与style
- 下一篇： Vue005_ 列表渲染