526互联

vue---属性绑定:多个判断条件/class/style

发布时间 2023-05-25 10:55:06作者: 帅到要去报警

我们在做VUE项目开发的时候，经常会遇到需要绑定多个判断条件，多个class，多个style的情况，下面就整理一下：

一、绑定多个判断条件

二、绑定多个class

1、绑定一个类名

 <div :class="{'active':isActive}"></div>

或三元表达式：

<div :class="isActive ? 'active' : ''"></div>

2、绑定两个类名

<div :class="{'active':isActive,'hover':isHover}"></div>

3、绑定数组

<div :class="[activeClass, errorClass]"></div>
data() {
    return {
        activeClass: "active",
        errorClass: "disActive"
    };
}

4、可以是数组和对象的组合

<div :class="[isback,{'isLike':likeClass}]"></div>

5、绑定数据对象

<div :class="classObject"></div>
export default {
  data() {
    return {
        isActive: true,
    };
  },
  computed: {
  classObject: function () {
    return {
      active: this.isActive,
    }
  }
}

三、绑定多个style