v-if的作用：就是对dom元素进行显示和隐藏。
语法：写在开标签中，true 添加 false 隐藏。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-if</h1>
<input type="checkbox" v-model="bool"/>{{bool}}
<h1 v-show="bool">我是v-show的标签</h1>
<h1 v-if="bool">我是v-if的标签</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
bool:true
},
methods:{
}
})
</script>
</body>
</html>v-else
语法： 必须配合v-if使用 不能单独使用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-if</h1>
<input type="checkbox" v-model="bool"/>{{bool}}
<h1 v-if="bool">请您登录</h1>
<h1 v-else>欢迎您尊敬的vip</h1>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
bool:true
},
methods:{
}
})
</script>
</body>
</html>v-else-if
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="./node_modules/vue/dist/vue.js"></script>
</head>
<body>
<div id="demoDiv">
<h1>v-else-if</h1>
<select v-model="text">
<option value="吃饭">吃饭</option>
<option value="睡觉">睡觉</option>
<option value="在吃饭">在吃饭</option>
<option value="在睡觉">在睡觉</option>
</select>
<h1 v-if="text=='吃饭'">我是吃饭的dom</h1>
<p v-else-if="text=='睡觉'">我是睡觉的dom</p>
<em v-else-if="text=='在吃饭'">我是在吃饭的dom</em>
<h2 v-else-if="text=='在睡觉'">我是在睡觉的dom</h2>
<b v-else>我什么都没有干</b>
</div>
<script>
new Vue({
el:"#demoDiv",
data:{
text:""
},
methods:{
}
})
</script>
</body>
</html>
v-if与v-for能同时使用吗
当 v-if 与 v-for 不推荐同时使用，v-for 具有比 v-if 更高的优先级，这意味着 v-if 将分别重复运行于每个 v-for 循环中,影响速度
如果必须要使用的话 变成一个嵌套关系
解决方式
1.使用computed处理数据在便利
2.使用v-show替代v-i