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元素未被移除，仅仅是display:none 。 3.备注: 使用v-if的时，元素可能无法获取到，而使用v-show一定可以获取到。 template能配合v-if使用，不能配合v-show使用。
<body>
<div id="root">
<h2>当前的n值是: {{n}}</h2>
<button @click="n++">点我n+1</button>
<!-- 使用v-show -->
<div v-show='false'>你好1</div>
<div v-show='1===1'>你好2</div>
<!-- 使用v-if，中途不能被打断，v-else写的条件都无效 -->
<div v-if="n===1">Vue</div>
<div v-else-if="n===2">React</div>
<div v-else-if="n===3">Angular</div>
<div v-else="n===2">？？？</div>
<!-- template可以配合v-if使用，不能配合v-show使用 -->
<template v-if="n===1">
<div>你</div>
<div>好</div>
<div>吗</div>
</template>
</div>
</body>
<script>
let vm = new Vue({
el: "#root",
data: {
n: 0,
name: '条件渲染',
},
})
</script>
标签：Vue,show,渲染,else,移除,条件,表达式 From： https://www.cnblogs.com/ximu1009/p/17778871.html