这三个指令与JavaScript的条件语句if、else、else if类似
Vue的条件指令可以根据表达式的值在DOM中渲染或销毁元素或组件
例如:
<div class="app">
<p v-if=true > 你考了{{fraction}}分</p> <!--true 会直接显示-->
<p v-if=false > 你考了{{fraction}}分</p> <!--false 不会显示【渲染】-->
</div>
<script>
const app = new Vue({
el:".app",
data:{
fraction:80 //你考了个80分
}
})
</script>
可以是直接写死的 true 和 false 但是也可以是表达式 函数 和计算属性 都可以的 具体自己去测试多去练习
配合起来就是这样的:
<div class="app">
<p v-if="fraction >= 96">优秀</p>
<p v-else-if="fraction >= 80">良好</p>
<p v-else-if="fraction >= 60">及格</p>
<p v-else>不及格</p>
</div>
<script>
const app = new Vue({
el:".app",
data:{
fraction:80 //你考了个80分
}
})
</script>
其实就是一个显示和 不显示 的问题 个人感觉如果很多的话 那么很乱 ,这里推荐自己用 计算属性来写 效率高 整洁度也好