Vue核心语法第十二篇：条件渲染

一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 !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制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 !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制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 !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制disabled属性 -- !-- h2 v-showtrue欢迎来到{{name}}/h2 h2 v-iffalse欢迎来到{{name}}/h2 -- h2当前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中间不允许被打断。打断之后前面的可以后续的不生效了。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 !-- 准备好一个容器 -- div idroot !-- 控制显示和隐藏底层实现就是控制disabled属性 -- !-- h2 v-showtrue欢迎来到{{name}}/h2 h2 v-iffalse欢迎来到{{name}}/h2 -- h2当前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总结v-if写法v-if表达式v-else-if表达式v-else表达式适用于切换频率较低的场景。特点不展示的 DOM 元素直接被移除。注意v‑if 可以和 v‑else‑if、v‑else 一起使用但要求结构不能被 “打断”。v‑show写法v‑show表达式适用于切换频率较高的场景。特点不展示的 DOM 元素未被移除仅仅是使用样式隐藏掉备注使用 v‑if 的时候元素可能无法获取到而使用 v‑show 一定可以获取到。