Vue条件判断语句

1.v-if的使用 删除或创建元素

<div id="app"> <h2 v-if="isShow">{{messgae}}</h2> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:'你好呀' } }) </script>

2.v-else的使用

<div id="app"> <h2 v-if="isShow">{{messgae}}</h2> <h2 v-else>否则显示我</h2> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:'你好呀'， isShow:true } }) </script>

3.v-if和v-else-if的使用

<div id="app"> <h1 v-if="score>=90">优秀</h1> <h1 v-else-if="score>=80">良好</h1> <h1 v-else>良好以下</h1> </div> </body> <script> const app = new Vue({ el:"#app", data:{ score:99 } }) </script>

4.v-show 更改style 只是隐藏了 切换频率高用这个

<div id="app"> <h2 v-show="isShow">{{messgae}}</h2> </div> </body> <script> const app = new Vue({ el:"#app", data:{ message:'你好呀' } }) </script>