文章目录
- v-show
- v-if
- v-else-if
- v-else
- v-if 与 template
- 总结
v-show
<!--使用v-show做条件渲染-->
<h1 v-show="false">{{name}}</h1>
<!--或-->
<h1 v-show="1===3">{{name}}</h1>
举例1
<div id="root">
<h2>当前n值是{{n}}</h2>
<button @click="n++">点我n+1</button>
<div v-show="n===1">2020</div>
<div v-show="n===2">2021</div>
<div v-show="n===3">2022</div>
</div>
<script type="text/javascript">
Vue.config.productionTip = false
//创建vue实例
new Vue({
el: "#root",
data: {
name: "你好",
n: 0
}
})
</script>v-if
<!--使用v-if做条件渲染-->
<h1 v-if="false">{{name}}</h1>
<h1 v-if="1===1">{{name}}</h1>
如果切换频率高用 v-show，切换频率低用 v-if
v-else-if
举例2
<div id="root">
<h2>当前n值是{{n}}</h2>
<button @click="n++">点我n+1</button>
<div v-if="n===1">2020</div>
<div v-else-if="n===1">2021</div>
<div v-else-if="n===3">2022</div>
</div>
可以看到 v-if、v-else-if 的逻辑 和 if-else if 的逻辑是相同的，一个符合下边的代码就不执行了
v-else
<div id="root">
<h2>当前n值是{{n}}</h2>
<button @click="n++">点我n+1</button>
<div v-if="n===1">2020</div>
<div v-else-if="n===1">2021</div>
<div v-else-if="n===2">2022</div>
<div v-else>某年</div>
</div>v-if 与 template
<div id="root">
<h2>当前n值是{{n}}</h2>
<button @click="n++">点我n+1</button>
<template v-if="n===1">
<h2>2020</h2>
<h2>2021</h2>
<h2>2022</h2>
</template>
</div>总结
条件渲染
1、v-if
写法：
(1).v-if="表达式” (2).v-else-if="表达式" (3).v-else="表达式" 适用于：切换频率较低的场景
特点：不展示的DOM元素直接被移除
注意: v-if可以和v-else-if、v-else一起使用，但要求结构不能被"打断”
2、v-show
写法：v-show="表达式" 适用于：切换频率较高的场景
特点：不展示的DOM元素未被移除，仅仅是使用样式隐藏掉
3.备注:
用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到
