v-if和v-show的异同
生活随笔
收集整理的這篇文章主要介紹了
v-if和v-show的异同
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
v-if：能夠直接銷毀和重建dom達到元素顯示和隱藏的效果
v-show：修改元素的displaycss數據讓其顯示或隱藏
<!DOCTYPE html> <html lang="en"><head><title>v-show指令</title><meta charset="utf-8" /><script src="https://unpkg.com/vue/dist/vue.js"></script></head><body><div id="app"><h1 v-show="yes">Yes</h1><h1 v-show="no">No</h1><h1 v-show="age > 25">Age: {{ age }}</h1></div><div id="a"><h1 v-if="yes">Yes</h1><h1 v-if="no">No</h1><h1 v-if="age > 25">Age: {{ age }}</h1></div><script>var app = new Vue({el: "#app",data: {yes: true, //值為真no: false, //值為假age: 28}});var a = new Vue({el: "#a",data: {yes: true, //值為真，插入元素no: false, //值為假，不插入元素age: 28}});</script></body> </html>總結
以上是生活随笔為你收集整理的v-if和v-show的异同的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 72. 编辑距离
- 下一篇： kindeditor编辑器使用七牛云上传