vue - 条件判断

v-if 和 v-else

当v-if为true时，存在v-if的标签里面的内容显示；
当v-if为false时，存在v-else的标签里面的内容显示。
v-else后面不需要跟表达式。

data(){
	message:"hello",
	isShow:true
}

<h2 v-if="isShow">{{message}}</h2>
<h2 v-else>isShow为false</h2>

浏览器页面显示
通过控制台改变isShow的值
此时浏览器页面上显示

v-if 和 v-else-if 和 v-else的使用

例子：根据成绩输出等级（通常不会用这种方法，会使用计算属性实现）

data(){
	score:99
}

<h2 v-if='score>=90'>优秀</h2>
<h2 v-else-if='score>=80'>良好</h2>
<h2 v-else-if='score>=60'>及格</h2>
<h2 v-else>不及格</h2>

通过控制台改变

v-show 和 v-if 的区别

v-if：当条件为false时，压根不会有对应的元素在DOM中
v-show：当条件为false时，仅仅是将display属性设置为none

在开发时如何选择：
当需要在显示与隐藏间切换很频繁时，选择v-show
当只有一次切换时，选择v-if

data(){
	message:"你好呀",
	isUser:"true"
}

<h2 v-if="isUser">{{meaasge}}</h2>
<h2 v-show="isUser">{{message}}</h2>