条件判断

v-if v-else v-else-if

v-if可以根据表达式中的值渲染或者销毁元素和元素组件。v-if会频繁创建DOM元素和销毁DOM元素,效率慢 <div id="app"> <div v-if="score >= 90">优秀</div> <div v-else-if="score >= 80">良好</div> <div v-else-if="score >= 60">及格</div> <div v-else="score < 60">不及格</div> <h2>{{score}}</h2> <button @click="upScore">up</button> <button @click="downScore">down</button> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ score:67 }, methods:{ upScore(){ if(this.score>90){ this.score=100 }else{ this.score+=10 } }, downScore(){ if(this.score<10){ this.score=0 }else{ this.score-=10 } } } }) </script>

v-show

v-show 不显示的元素会在元素写入style=“display:none;”,不影响DOM元素 <div id="app"> <div v-show="score >= 90">优秀</div> <div v-show="score >= 80 && score < 90">良好</div> <div v-show="score >= 60 && score < 80">及格</div> <div v-show="score < 60">不及格</div> <h2>{{score}}</h2> <button @click="upScore">up</button> <button @click="downScore">down</button> </div> <script type="text/javascript"> var app=new Vue({ el:"#app", data:{ score:67 }, methods:{ upScore(){ if(this.score>90){ this.score=100 }else{ this.score+=10 } }, downScore(){ if(this.score<10){ this.score=0 }else{ this.score-=10 } } } }) </script> v-if 和 v-show 二者区别 v-if是完全不创建DOM元素,而v-show则是创建了DOM元素,仅仅是使用display:none隐藏了该元素,当需要频繁的显示、隐藏一些内容时,使用v-show。当我们仅有一次切换,某些v-if场景根本不会显示出来的时候,用v-if。