本篇讲 vue 中对 dom 元素节点进行 "显示和隐藏" 的实现方式指令, 即 v-if 和 v-show. 其实一句话就能说明白, v-if 的底层是从 dom 树中增删节点; 而 v-show 的底层是 "display = none" 和 "display = block".
v-if
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-if</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { show: true }
},
template: `<div v-if="show">hello, youge</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
当 show = false 时候, 该元素节点不会进行展示. 查看渲染的代码可以发现, 在这个 root 节点下, 该 div 已经被删除掉了啦, 剩下了一个寂寞.
<-- v-if -->
v-show
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-show</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return { show: true }
},
template: `<div v-show="show">hello, youge</div>`
})
const vm = app.mount('#root')
</script>
</body>
</html>
当 show: false 时, 该元素节点也不会进行展示, 查看渲染的代码可以发现, 在这个 root 节点下, 该 div 还是存在的
<div style="display: none;">hello, youge</div>
如果需要频繁显示和隐藏切换的, 就建议用 v-show, 如果低频操作就用 v-if 这个看个人喜好吧.
v-if | v-else-if | v-else
在 vue 里还提供了一种 if-else 这样的多分支条件来灵活配置哦.
<!DOCTYPE html>
<html lang="en">
<head>
<title>v-if-else</title>
<script src="https://unpkg.com/vue@3"></script>
</head>
<body>
<div id="root"></div>
<script>
const app = Vue.createApp({
data () {
return {
show: true,
condition_01: false,
condition_02: true
}
},
template: `
<div v-show="show">hello, youge</div>
<div v-if="condition_01">if</div>
<div v-else-if="condition_02">else-if</div>
<div v-else>else</div>
`
})
const vm = app.mount('#root')
</script>
</body>
</html>
需注意的是这里的 v-if, v-else-if 和 v-else 的这三个 dom 节点要连续一起保证这个分支结构的闭环.
最后再来小结一下吧:
- v-show: 不会删掉 dom元素, 底层是 "display=none", 适用于频繁需要显示或隐藏的场景
- v-if: 会增删掉 dom 元素节点, 适用于不那么频繁显示隐藏的场景, 如登录呀, 切换主题啥的
- v-if, v-else-if, v-else: 可以进行分支判断, 这个我倒是在工作中用的不太多