一、v-if
判斷通常是對用戶行為的判斷
用js來控制，則是使用if語句進行判斷，而vue也提供了一個類似if語句的指令——v-if實現條件判斷
首先在數據項里設置變量
data() { return { content: "喵喵喵", play: true } }
通過控制play的值就可以實現元素隱藏與顯示
在html文件中是這樣寫的：
<template>
<div id="root">
<div v-if="play">{{ content }}</div>
<div class="button" @click="toggle">toggle</div>
</div>
</template>
當play的值為true時，{{}}中會被渲染上對應的內容，如果play為false，則{{}}內容隱藏。
那么，如何控制內容顯示還是隱藏呢，通過在<button>上綁定點擊事件實現切換
回到js部分，增加一項method
methods: { toggle: function() { this.play = !this.play //取反 } }
完成以上代碼后，就可以實現切換的功能了
二、v-show
使用v-show的方法和v-if一樣，在對應的html元素上添加指令
<div id="root"> <div v-show="play">{{ content }}</div> <div class="button" @click="toggle">toggle</div> </div>
接下來打開網頁測試下，實現的效果相同，都能把元素隱藏或顯示，那么區別在哪呢。
要看dom結構才能發現其中的奧秘
這是使用v-if，play為false的dom結構
這是使用v-show，play為false的dom結構
根據dom結構得出v-if與v-show的區別：
v-if以刪除或添加dom結點控制元素的顯示隱藏
v-show是通過添加樣式display:none控制元素的顯示隱藏
總結：
v-if和v-show都可以控制元素的顯示或隱藏，具體該使用哪一個應該根據使用情況決定。建議只有一次或少量切換的時候使用v-if，多次切換的情況使用v-show。寫頁面，當然要從性能方面考慮。