vue class绑定-04

v-bind 绑定class - 对象语法

• 1 class数据内联在模板里面

<div v-bind:class="{ active: isActive }"></div> 
//当isActive为真有active 这个class 反之亦然

<div class="static"
     v-bind:class="{ active: isActive, 'text-danger': hasError }">
</div>
  data: {
    isActive: true,
    hasError: false
 }
  //绑定的class可以与普同的class 共存

  //上 渲染结果为
  <div class="static active"></div>

• 2 class 数据定义在data中

<div v-bind:class="classObject"></div>
//同方式一只是数据书写的地方不一致而已
data: {
  classObject: {
    active: true,
    'text-danger': false
  }
}

• 3 class 绑定在一个计算属性中

<div v-bind:class="classObject"></div>

computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      'text-danger': this.error && this.error.type === 'fatal'
    }
  }
}

v-bind 绑定class - 数组语法

• 1 把一个数据传递个 v-bind:class = [activeClass,errorClass]

<div v-bind:class="[activeClass, errorClass]"></div>

  data: {
    activeClass: 'active',
    errorClass: 'text-danger'
  }
//渲染为
<div class="active text-danger"></div>

• 2 可以在数中写表达式和对象 如下

<div v-bind:class="[isActive ? activeClass : '', errorClass]"></div>
//当isAtive为真的时候 activeCalss就存在 反之不存在 但是errorClass始终存在

<div v-bind:class="[{ active: isActive }, errorClass]"></div>
//使用数组，中包含对向 的方式更加清晰

v-bind class 在组件上使用

• 在自定义组件上使用class 的时候 这个class 会自动绑定在该组件的根元素上面，已经存在的class不会被覆盖

Vue.component('my-component', {
  template: '<p class="foo bar">Hi</p>'
})
//注册组件名为my-conponent 的组件，组件模板是tempalte 对应的字符串

//如
<my-component class="baz boo"></my-component>

//渲染的结果为
<p class="foo bar baz boo">Hi</p>

v-bind:style 内联样式

• 对象语法 同样可以使用对象语法

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

data: {
  activeColor: 'red',
  fontSize: 30
}

//或者直接绑定一个对象
<div v-bind:style="styleObject"></div>

data: {
  styleObject: {
    color: 'red',
    fontSize: '13px'
  }
}

• 数组语法

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

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

• 多重值
  1。从 2.3.0 起你可以为 style 绑定中的属性提供一个包含多个值的数组，常用于提供多个带前缀的值，例如 浏览器只会渲染最后一个被支持的值

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