实现多种状态的数据判断(vue)

效果图:

 

 

 

handleSmsType (type) {
      switch (type) {
        case 1:
          return '下单成功通知'
        case 2:
          return '发货通知'
        case 3:
          return '到店通知'
      }
    }

第二种:

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
要在Vue中根据值的变化来改变样式,有多种方法可以实现。以下是其中一些方法: 1.通过计算属性 在Vue中,可以使用计算属性来检测数据的变化,并根据数据的不同状态来改变样式。 例如,给定一个数据变量color,可以使用如下代码: ``` <div :style="{'background-color': bgColor}"></div> ``` 然后可以定义一个计算属性,当color值为'blue'时,返回'lightblue',当值为'green'时,返回'lightgreen': ``` computed: { bgColor() { if (this.color === 'blue') { return 'lightblue'; } else if (this.color === 'green') { return 'lightgreen'; } return ''; } } ``` 这样,当color的值发生变化时,计算属性会自动更新,将新的背景颜色应用于元素。 2.使用v-bind:class指令 Vue也提供了一种特殊的指令v-bind:class,可以根据数据变量的值来动态地添加或删除类。 例如,给定一个数据变量isDangerous,它的值为true或false,可以在模板中通过v-bind:class来添加或删除类: ``` <div v-bind:class="{danger: isDangerous}"></div> ``` 这里的danger是一个CSS类,当isDangerous为true时,该CSS类会被添加到元素中,从而改变元素的样式。 你还可以使用另一种语法来添加多个类名: ``` <div v-bind:class="[isActive ? 'active' : '', isDangerous ? 'danger' : '']"></div> ``` 如果isActive的值为true,则添加类'active',如果isDangerous的值为true,则添加类'danger'。 总之,这些方法都提供了一种灵活的方式,可以根据数据的变化动态地改变样式。可以根据实际情况选择最合适的方法。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值