【Vue】动态设置元素类以及样式

Vue2 动态设置元素类以及样式

1.动态设置类 class

1.1 字符串语法

通过v-bind绑定元素的class属性，为其指定一个字符串：

<div v-bind:class="className">class动态绑定</div>
<script>
export default {
  data() {
    return {
      className: 'app'
    }
  }
}
</script>

此时我们可以通过改变className变量来切换样式。注意，当className为 '' 时，这个class属性仍然会被添加到真实DOM上，只不过没有值。

1.2 对象语法

通过v-bind绑定元素的class属性，为其指定一个对象：

<div v-bind:class="{active: isActive}">class动态绑定</div>
<script>
export default {
  data() {
    return {
      isActive: true
    }
  }
}
</script>

在上面的例子中，这个元素身上的class属性是否包含active，取决于数据isActive的值。当isActive为true时，渲染结果如下：

<div class="active">class动态绑定</div>

而当我们动态修改isActive的值时，该元素的class属性也会动态更新，将值改为false：

<div class>class动态绑定</div>

进一步地，对象中可以传入多个className：

<div v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {
  data() {
    return {
      isActive: true,
      isDanger: true
    }
  }
}
</script>

此时的渲染结果为：

<div class="active danger">class动态绑定</div>

当然，v-bind绑定的class属性也可以与普通的class并存：

<div class="common" v-bind:class="{active: isActive, danger: isDanger}">class动态绑定</div>
<script>
export default {
  data() {
    return {
      isActive: true,
      isDanger: true
    }
  }
}
</script>

此时渲染结果为：

<div class="common active danger">class动态绑定</div>

另外，当需要动态绑定的className太多时，不需要内联定义在模板中，此时可以选择在data中定义一个对象，或使用计算属性：

<div class="common" v-bind:class="classObj1">class动态绑定 --- data中定义对象</div>
<div class="common" v-bind:class="classObj2">class动态绑定 --- 计算属性</div>
<script>
export default {
  data() {
    return {
      isActive: true,
      isDanger: true,
      classObj1: {
        active: true,
        danger: true
      }  
    }
  },
  computed: {
    classObj2() {
      return {
        active: this.isActive,
        danger: this.isDanger
      }
    }
  }
}
</script>

1.3 数组语法

通过v-bind绑定元素的class属性，为其指定一个数组：

<div v-bind:class="[className, 'common']"></div>
<script>
export default {
  data() {
    return {
      className: 'app'
    }
  }
}
</script>

此时的渲染结果：

<div class="common app"></div>

使用数组，里边的值可以是响应式的也可以是普通类名，同时也可以使用三元表达式，甚至可以结合上面的对象语法使用：

<div v-bind:class="[className, 'common', isActive ? 'active': '', { danger: isDanger }]"></div>
<script>
export default {
  data() {
    return {
      className: 'app',
      isAcive: true,
      isDanger: true,
    }
  }
}
</script>

2.动态绑定样式 Style

2.1 字符串语法

通过v-bind绑定元素的style属性，为其指定一个字符串：

<div v-bind:style="style">style动态添加</div>
<script>
export default {
  data() {
    return {
      style: 'color: red'
    }
  }
}
</script>

2.3 对象语法

通过v-bind绑定元素的style属性，为其指定一个对象，对象语法十分直观 —— 看着非常像 CSS，但其实是一个js对象。CSS 名可以用驼峰式或短横线分隔 (记得用引号括起来) 来命名。：

<div v-bind:style="{ color: color, fontSize: fontSize + 'px', (padding-left): paddingLeft }"></div>
<script>
export default {
  data() {
    return {
      style: 'red',
      fontSize: 30,
      paddingLeft: '10px'
    }
  }
}
</script>

既然可以使用对象语法，那么同样的，style也可以在data中定义一个对象或者使用计算属性。

2.3 数组语法

通过v-bind绑定元素的style属性，为其指定一个数组，数组中可以为多个样式对象：

<div v-bind:style="[styleObj, overridingStyles]"></div>
<script>
export default {
  data() {
    return {
      color: 'red',
      fontSize: '30px',
      overridingStyles: {
        color: 'blue',
        fontSize: '40px'
      }
    }
  },
  computed: {
    styleObj() {
      return {
        color: this.color,
        fontSize: this.fontSize
      }
    }
  }
}
</script>