Vue中class与style的绑定

为了减少书写量 以下实例代码中直接书写vue中的data 对象

绑定class

对象语法

<div class="box" v-bind:class="{active:isactive,box:isbox}">
</div>

//vue
data{
    isactive:true,
    isbox:false,
}

• 当isactive 为true 时候 会为该div添加一个名为 active 的类
• 也可以直接绑定数据里的一个对象

  <div v-bind:class="classObject"></div>
  //vue的data 对象内容为
  data: {
    classObject: {
      active: true,
      'text-danger': false
    }
  }

数组语法

<div class="box" v-bind:class="[activeClass,errorClass]"
//vue
data{
    activeClass: 'active',
    errorClass: 'error',
}

以上div的class会渲染为 box active error三个

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

<div class="Box" v-bind:class="[activeClass,{box:isbox}]" id="app3"></div>

当你在一个定制的组件上用到 class 属性的时候，这些类将被添加到根元素上面，这个元素上==已经存在的类不会被覆盖==

绑定内联样式

对象语法

• 直接将属性写在行内

  <div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

• 绑定到一个样式对象上

  <div class="box" v-bind:style="styleObject">
  //vue
  data{
      styleObject:{
          background:'red',
          width:'100px'
      }
  }

数组语法

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

<div v-bind:style="[baseStyles, overridingStyles]">

自动添加前缀

当 v-bind:style 使用需要特定前缀的 CSS 属性时，如 transform，Vue.js 会自动侦测并添加相应的前缀。