【学习笔记】17-v-if、v-else、v-else-if的使用

Vue的逻辑判断

常见的逻辑判断只有v-if和v-else，很少用到v-else-if，太多的逻辑判断，建议在conputed里进行

代码示例

<div id="app" >
		<h2 v-if="vif">{{message}}</h2>
		<h2 v-else>我是else展现出来的</h2>
		<!-- 常见的逻辑判断只有v-if和v-else -->
		
		<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>
		<!-- 一般不会以这种方式做复杂判断，建议在conputed里进行 -->
		<h2>{{resultScore}}</h2>
		
	</div>
<script src="vue.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
	const apt = new Vue({
		el:'#app',
		data:{
			counter:0,
			message:"你好",
			vif:true,
			score:99
		},
		computed:{
			resultScore(){
				let result = " ";
				if (this.score>90){
					result='优秀'
				} else if (this.score > 80){
					result='良'
				} else if (this.score > 70){
					result = '中'
				} else if (this.score > 60){
					result = '及格'
				} else{
					result = '不及格'
					}
				return result
			}
		}
	})
</script>