v-if,v-else-if,v-else
- 这三个指令与JavaScript的条件语句if,else,else if类似
- Vue的条件指令可以根据表达式的值在DM中渲染或销毁元素或组件
v-if原理
- v-if后面的条件为flase时,对应的元素以及其子元素不会渲染
- 也就是根本没有不会有对应的标签出现在DOM中
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<!-- 多重分支,不建议直接用标签,建议用计算属性去做-->
<h2 v-if="score>=90">优秀</h2>
<h2 v-else-if="score>=80">良好</h2>
<h2 v-else-if="score>=60">及格</h2>
<h2 v-else>不及格</h2>
<hr>
<hr>
<h1>{{result}}</h1>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
const app = new Vue({
el:"#app",
data:{
message:"HBuider X",
score:95,
},
computed:{
result(){
let showMessage = '';
if(this.score>=90){
showMessage = '优秀';
}
else if(this.score>=80){
showMessage = '良好';
}
else if(this.score>=60){
showMessage = '及格';
}
else{
showMessage = '不及格';
}
return showMessage;
}
}
})
</script>
</body>
</html>
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/11bd0fb0961325880eb78d3ad21261d0.png)