一v-show1代碼!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title綁定樣式/title script typetext/javascript src../../js/vue.js/script /head body !-- 準(zhǔn)備好一個容器 -- div idroot !-- 控制顯示和隱藏底層實現(xiàn)就是控制disabled屬性 -- h2 v-showtrue歡迎來到{{name}}/h2 h2 v-showa歡迎來到{{name}}/h2 /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 樂園, a: false }, methods: { } }) /script /body /html2效果二v-if-else1特點不滿足條件的話元素都直接給刪除了2代碼!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title綁定樣式/title script typetext/javascript src../../js/vue.js/script /head body !-- 準(zhǔn)備好一個容器 -- div idroot !-- 控制顯示和隱藏底層實現(xiàn)就是控制disabled屬性 -- h2 v-showtrue歡迎來到{{name}}/h2 h2 v-iffalse歡迎來到{{name}}/h2 /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 樂園, a: false }, methods: { } }) /script /body /html3效果三場景一1代碼!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title綁定樣式/title script typetext/javascript src../../js/vue.js/script /head body !-- 準(zhǔn)備好一個容器 -- div idroot !-- 控制顯示和隱藏底層實現(xiàn)就是控制disabled屬性 -- !-- h2 v-showtrue歡迎來到{{name}}/h2 h2 v-iffalse歡迎來到{{name}}/h2 -- h2當(dāng)前n是{{n}}/h2 button clickn點我n1/button dev v-shown0Angular/dev dev v-shown1React/dev dev v-shown2Vue/dev dev v-ifn0Angular/dev dev v-ifn1React/dev dev v-ifn2Vue/dev /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 樂園, a: false, n: 0 }, methods: { } }) /script /body /html2效果四v-else-if和v-elsev-if v-else-if v-else中間不允許被打斷。打斷之后前面的可以后續(xù)的不生效了。1代碼!DOCTYPE html html langen head meta charsetUTF-8 meta nameviewport contentwidthdevice-width, initial-scale1.0 title綁定樣式/title script typetext/javascript src../../js/vue.js/script /head body !-- 準(zhǔn)備好一個容器 -- div idroot !-- 控制顯示和隱藏底層實現(xiàn)就是控制disabled屬性 -- !-- h2 v-showtrue歡迎來到{{name}}/h2 h2 v-iffalse歡迎來到{{name}}/h2 -- h2當(dāng)前n是{{n}}/h2 button clickn點我n1/button dev v-shown0Angular/dev dev v-shown1React/dev dev v-shown2Vue/dev !-- dev v-ifn0Angular/dev dev v-ifn1React/dev dev v-ifn2Vue/dev -- dev v-ifn0Angular/dev dev v-else-ifn1React/dev dev v-else-ifn2Vue/dev dev v-elseVue/dev /div script Vue.config.productionTip false const vm new Vue({ el: #root, data: { name: 樂園, a: false, n: 0 }, methods: { } }) /script /body /html五v-if和template配合使用1固定組合多個組件顯隱判斷邏輯一致使用此組合寫一遍就可以了template不參與html 的dom。沒有v-show和template的組合2總結(jié)v-if寫法v-if表達(dá)式v-else-if表達(dá)式v-else表達(dá)式適用于切換頻率較低的場景。特點不展示的 DOM 元素直接被移除。注意v?if 可以和 v?else?if、v?else 一起使用但要求結(jié)構(gòu)不能被 “打斷”。v?show寫法v?show表達(dá)式適用于切換頻率較高的場景。特點不展示的 DOM 元素未被移除僅僅是使用樣式隱藏掉備注使用 v?if 的時候元素可能無法獲取到而使用 v?show 一定可以獲取到。