样式绑定之数组语法

class 数组语法

我们可以把一个数组传给:class

<div :class="[activeClass, active2Class]"></div>

data(){
  return {
    activeClass: 'active',
    active2Class: 'active2'
  }
}

渲染为：

<div class="active active2"></div>

假如你想根据条件进行列表切换Class，可以利用三元表达式进行

<div :class="[isActive ? activeClass : '', active2Class]"></div>

不过，当有多个条件 class 时这样写有些繁琐。也可以在数组语法中使用对象语法

<div :class="[{active: isActive}, active2]"></div>

style 数组语法 v-bind:style的数组语法可以将多个样式对象应用到同一个元素上

<div :style="[colorStyle, sizeStyle]"></div>

data(){
  return {
    colorStyle: {
      color: 'red',
      'background-color': 'yellow'
    },
    sizeStyle: {
      fontSize: '14px'
    }
  }
}

自动添加前缀

当v-bind:style使用需要添加浏览器引擎前缀的css属性时，如transform

从 2.3.0 起你可以为 style 绑定中的 property 提供一个包含多个值的数组，常用于提供多个带前缀的值，例如：

<div :style="{display: ['-webkit-box', '-ms-flexbox', 'flex']}"></div>

这样写只会渲染数组中最后一个被浏览器支持的值。在本例中，如果浏览器支持不带浏览器前缀的 flexbox，那么就只会渲染 display: flex。