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>
展开阅读全文
©️2020 CSDN 皮肤主题: 大白 设计师: CSDN官方博客 返回首页
实付0元
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值