1. 控制元素是否显示会用到v-if,当if中的值为true时，元素会显示到界面上
1.1 代码
<h1 v-if="true">1Vue学习</h1>1.2 界面显示效果
2.当v-if的值为false时，元素会从界面上消失
2.1 代码
<h1 v-if="false">1Vue学习</h1>2.2 界面显示效果
3.除了单条件的v-if之外，还有双条件v-if和v-else
3.1 代码
<h1 v-if="false">1Vue学习</h1>
<h2 v-else>2Web前端开发</h2>3.2 界面显示效果
通过上面的例子我们可以知道，如果if的值为假的时候(元素隐藏)，那么else的值必定为真(元素显示)
4.Vue在2.x之后有了新的特性，那就是多重条件v-if、v-else-if、v-else，通过今天是星期几的小例子，可以快速掌握多重条件。
4.1 代码
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<div v-if="day==1">今天是周1</div>
<div v-else-if="day==2">今天是周2</div>
<div v-else-if="day==3">今天是周3</div>
<div v-else-if="day==4">今天是周4</div>
<div v-else-if="day==5">今天是周5</div>
<div v-else-if="day==6">今天是周6</div>
<div v-else-if="day==7">今天是周日</div>
<div v-else>格式错误</div>
</div>
<script src="js/vue.js"></script>
<script>
new Vue({
el: "#app",
data: {
day: 3
}
})
</script>
</body>
</html>4.2 当day为3的时候，界面显示效果
注意：使用多重条件时，应避免在条件中出现其他标签，如下所示
<div v-if="day==1">今天是周1</div>
<div v-else-if="day==2">今天是周2</div>
<div v-else-if="day==3">今天是周3</div>
<br />
<div v-else-if="day==4">今天是周4</div>
<div v-else-if="day==5">今天是周5</div>
<div v-else-if="day==6">今天是周6</div>
<div v-else-if="day==7">今天是周日</div>
<div v-else>格式错误</div>这样使用会出现非常严重的错误