简介
主要介绍vue的条件渲染的两个指令语法v-if和v-show。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>条件渲染</title>
</head>
<body>
<div id="root">
<!-- 纯v-if展示 -->
<div v-if="n==1">当n=1时渲染</div>
<div v-if="n==1">当n=1时渲染</div>
<div v-if="n==1">当n=1时渲染</div>
<!-- 上面上个的条件都是一样的，可以使用template来括起来。 -->
<!-- <template v-if="n==1">
<div >当n=1时渲染</div>
<div >当n=1时渲染</div>
<div >当n=1时渲染</div>
</template> -->
<div v-if="n==2">当n=2时渲染</div>
<div v-if="n==3">当n=3时渲染</div>
<div v-if="n==4">当n=4时渲染</div>
<!-- 纯v-show展示 -->
<div v-show="n==1">当n=1时渲染</div>
<div v-show="n==1">当n=1时渲染</div>
<div v-show="n==1">当n=1时渲染</div>
<div v-show="n==2">当n=2时渲染</div>
<div v-show="n==3">当n=3时渲染</div>
<div v-show="n==4">当n=4时渲染</div>
<button @click="n++">n+1</button>
<!-- 还有一种是if else if else的形式，与js分支的逻辑一致 -->
<div v-if="n==1">当n=1时渲染</div>
<div v-else-if="n==2">当n=2时渲染</div>
<div v-else-if="n==3">当n=3时渲染</div>
<div v-else-if="n==4">当n=4时渲染</div>
<div v-else>当n=其他时渲染</div>
</div>
</body>
<script src="./js/vue.js"></script>
<script>
new Vue({
el:"#root",
data:{
n:1
}
})
</script>
</html>
v-if和v-show的区别是，v-if如果不符合条件时，直接就不渲染该元素，也就是页面上实际上没有该元素，适用于切换频率较低的场景，v-show如果不符合条件时，只是会把该元素加上样式 display:none进行隐藏，实际上元素是存在的，适用于切换频率较高的场景。
