搜索文档
v-show
知识点
- 写法：v-show="表达式"，要求表达式的结果可转为布尔值。
- 适用于：切换频率较高的场景。
- 特点：不显示的 DOM 未被移除，而是使用 display 属性控制了显隐。
代码实现
html
<body>
<div id="root">
<h2>当前 n 的值为：{{ n }}</h2>
<button @click="n++">n + 1</button>
<h3 v-show="n % 2 == 0">n 是偶数</h3>
<h3 v-show="n % 2 == 1">n 是奇数</h3>
</div>
<script>
new Vue({
el: '#root',
data: {
n: 0,
},
})
</script>
</body>v-if
知识点
- 写法
- v-if="表达式"
- v-else-if="表达式"
- v-else
- 适用于：切换频率较低的场景。
- 特点：不显示的 DOM 直接被移除掉。
- 注意：v-if，v-else-if，v-else 要一起使用，中间不能出现其他 DOM 节点。
代码实现
html
<body>
<div id="root">
<h2>当前 n 的值为：{{ n }}</h2>
<button @click="n++">n + 1</button>
<h3 v-if="n % 2 == 0">n 是偶数</h3>
<h3 v-else>n 是奇数</h3>
</div>
<script>
new Vue({
el: '#root',
data: {
n: 0,
},
})
</script>
</body>template 标签
作用
- 相当于小程序中的 block 标签。
- 不会生成 DOM 节点。一般配合 v-if 使用。
代码实现
html
<body>
<div id="root">
<h2>当前 n 的值为：{{ n }}</h2>
<button @click="n++">n + 1</button>
<template v-if="n % 2 == 0">
<h3>n 是偶数</h3>
<h3>n 不是奇数</h3>
</template>
</div>
<script>
new Vue({
el: '#root',
data: {
n: 0,
},
})
</script>
</body>区别
- v-if 控制 DOM 是否渲染，v-show 通过 css 控制显示隐藏。
- 在一个自定义组件上使用 v-if，条件由
true变为false时组件的beforeDestroy和destroyed生命周期钩子回执行，v-show 则不会。