（6）v-if ；v-else-if ；v-else的实例
作者：互联网
v-if ;v-else-if ;v-else通过分数展示分数等级的案例。
<!DOCTYPE html>
<html>
<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> -->
<!-- 代码规范采用计算属性的方式 -->
<h2>{{result}}</h2>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<script>
var app=new Vue(
{el:"#app",
data:{
score:90
},
methods:{
},
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>
标签：score,else,60,实例,result,90,showMessage 来源： https://blog.csdn.net/m0_44946030/article/details/119301998