vue2 class与style动态绑定语法

vue2 class与style动态绑定

class与style都是标签内的属性，可以使用v-bind指令解析表达式来实现动态添加。vue对class与style做了专门的增强，class、style的表达式结果类型可以是字符串、对象或者数组。

class

字符串语法

给v-bind:class添加一个字符串

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

通过改变className来切换样式。当className为''时，class仍然会被添加到真实DOM上，只不过没有值而已。

渲染结果：

<div class>class动态绑定div>

对象语法

给v-bind:class添加一个对象

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

上面的语法表示 active 这个 class 存在与否将取决于数据isActive是否为true。

渲染结果：

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

因为isActive是响应式的，当isActive变为false时，class列表也会随之更新，变成：

<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中定义一个对象或者使用计算属性

在data中定义：

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

使用计算属性

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

数组语法

给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': '']">div>
<script>
export default {
  data() {
    return {
      className: 'app',
      isAcive: true
    }
  }
}
script>

渲染结果：

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

style

字符串语法

给v-bind:style添加一个字符串

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

对象语法

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

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

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

在data中定义：

<div v-bind:style="styleObj">div>
<script>
export default {
  data() {
    return {
      styleObj: {
        color: 'red',
        fontSize: '30px'
      }
    }
  }
}
script>

使用对象属性:

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

数组语法

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>