一、v-if和v-else
v-if判断语句之用,v-else则是和v-if一起出现,当v-if判断为true时,v-else不执行;当v-if判断为false时,v-else才执行。
源码01:
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>20210327练习</title>
</head>
<body>
<div id="app">
<h2 v-if="isShow">
{{message}}
<div>abcabc</div>
<div>abc</div>
<div>abc</div>
<div>abc</div>
</h2>
<h1 v-else>这里为v-if为false时显示</h1>
</div>
<script src="./js/vue.js"></script> <!--引入Vue-->
<script>
const app = new Vue({
el: '#app',
data:{
isShow:true
}
})
</script>
</body>
</html>
二、v-else-if
v-else-if会在多个判断语句时使用到,但不常用。
源码02:
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>20210327练习</title>
</head>
<body>
<div id="app">
<h2 v-if = "score >= 90">优秀</h2>
<h2 v-else-if = "score >= 80">良好</h2>
<h2 v-else-if = "score >= 70">较好</h2>
<h2 v-else-if = "score >= 60">一般</h2>
<h2 v-else = "score < 60">不及格</h2>
</div>
<script src="./js/vue.js"></script> <!--引入Vue-->
<script>
const app = new Vue({
el: '#app',
data:{
score:96
}
})
</script>
</body>
</html>
但这种方式一般用的较少,因为我们习惯把这些判断语句放在el挂载点中的computed中:
源码03:
<!DOCTYPE >
<html>
<head>
<meta charset="utf-8" />
<title>20210327练习</title>
</head>
<body>
<div id="app">
<h2 v-if = "score >= 90">优秀</h2>
<h2 v-else-if = "score >= 80">良好</h2>
<h2 v-else-if = "score >= 70">较好</h2>
<h2 v-else-if = "score >= 60">一般</h2>
<h2 v-else = "score < 60">不及格</h2>
<h1>{{result}}</h1>
</div>
<script src="./js/vue.js"></script> <!--引入Vue-->
<script>
const app = new Vue({
el: '#app',
data:{
score:96
},
computed:{
result(){
let showMessage = '';
if(this.score >= 90){
showMessage = '优秀'
} else if (this.score >= 80){
showMessage = '良好'
} else if (this.score >= 70){
showMessage = '较好'
} else if (this.score >= 60){
showMessage = '一般'
} else {
showMessage = '不及格'
}
return showMessage
}
}
})
</script>
</body>
</html>
如果判断情况少(逻辑简单),那么使用源码01要方便一些,但如果像源码02和源码03判断情况比较多的时候,那么用源码03比较好。