Vue v-else-if 指令为 Vue v-if 添加一个 else-if 块。Vue v-else-if 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。
<!DOCTYPE html>
<html>
<head>
<title>Vue v-else 指令</title>
<script type="text/javascript" src="./lib/vue-2.6.10.min.js"></script>
</head>
<style type="text/css">
</style>
<body>
<div id="app">
<p v-if="score >= 90">优秀</p>
<p v-else-if="score >= 80">良好</p>
<p v-else-if="score >= 60">及格</p>
<p v-else>不及格</p>
<p>嗨客网(www.haicoder.net)</p>
</div>
</body>
<script type="text/javascript">
var vm = new Vue({
el :'#app',
data:{
score:70
}
})
</script>
</html>
浏览器运行效果如下图所示:
因为 score 值大于 60 且小于 80,所以执行了 Vue v-else-if,因此浏览器显示了 及格。
Vue v-else-if 指令为 Vue v-if 添加一个 else-if 块。Vue v-else-if 前一兄弟元素必须有 Vue v-if 或 Vue v-else-if。