一、v-if
判斷通常是對使用者行為的判斷
用js來控制，則是使用if語句進行判斷，而vue也提供了乙個類似if語句的指令——v-if實現條件判斷
首先在資料項裡設定變數
data()通過控制play的值就可以實現元素隱藏與顯示}
在html檔案中是這樣寫的：
"當play的值為true時，}中會被渲染上對應的內容，如果play為false，則}內容隱藏。root
">
if="
play
">}
class="
button
" @click="
toggle
">toggle
那麼，如何控制內容顯示還是隱藏呢，通過在上繫結點選事件實現切換
回到js部分，增加一項method
methods:完成以上**後，就可以實現切換的功能了}
二、v-show
使用v-show的方法和v-if一樣，在對應的html元素上新增指令
"接下來開啟網頁測試下，實現的效果相同，都能把元素隱藏或顯示，那麼區別在哪呢。root
">
"play
">}
class="
button
" @click="
toggle
">toggle
要看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。寫頁面，當然要從效能方面考慮。
隱藏和顯示
display none 隱藏物件 隱藏之後不佔據位置。display block 除了轉換為塊元素之外，同時還有顯示元素的意思。visibility hidden 隱藏之後佔據位置 visibility visible 顯示隱藏。只對溢位的隱藏。overflow visible 不剪下內容也不新增...
div 隱藏和顯示
內容 div的visibility可以控制div的顯示和隱藏，但是隱藏後頁面顯示空白 style visibility none document.getelementbyid typediv1 style.visibility hidden 隱藏 document.getelementbyid t...
jQuery 隱藏和顯示
jquery hide 和 show 通過 jquery，您可以使用 hide 和 show 方法來隱藏和顯示 html 元素 hide click function show click function 語法 selector hide speed,callback selector show ...