Vue.js实例学习：Class 与 Style 绑定

绑定 HTML Class

---

一、对象语法

我们可以传给 v-bind:class 一个对象，以动态地切换 class

<style type="text/css">
.static{
  background: red;
}
.active{
  background: blue;
  width: 100px;
}
.test{
  background: yellow;
  height: 100px;
}
</style>

<!-- active、test为类名；
其isactive、is的值为true/false
决定着active、test这两个类是否生效。-->
<div class="static" v-bind:class="{active:isactive,test:is}">{{ fullName }}</div>

<script type="text/javascript">
  var vm = new Vue({
      el:".static",
      data:{
        fullName:"ada",
        isactive:false,//true or false
        is:false,      //true or false
        active:"aa"    //跟上面active没关系，两者互不影响
      },
  });
</script> 

1、上面代码 执行结果：

2、如果我们将上面 isactive的值改为true ; is的值仍为false;

html部分相当于：（部分不必要部分已简化）

<div class="static active">{{ fullName }}</div>

我们发现此时.active 生效；宽度变为100px;背景变为蓝色。
执行结果：

3、我们再将上面的 isactive、is值均改为true ;
此时高度变为100px;背景变为黄色。

html部分相当于：（部分不必要部分已简化）

<div class="static active test">{{ fullName }}</div>

执行结果：

4、也可以计算属性
我们也可以在这里绑定一个返回对象的计算属性。这是一个常用且强大的模式：

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

data: {
  isActive: true,
  error: null
},
computed: {
  classObject: function () {
    return {
      active: this.isActive && !this.error,
      test: this.error && this.error.type === 'fatal'
    }
  }
}

二、数组语法

<style type="text/css">
.static{
  background: red;
}
.active{
  background: blue;
  width: 100px;
}
.test{
  background: yellow;
  height: 100px;
}
</style>

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

<script type="text/javascript">
var vm = new Vue({
  el:".static",
  data:{
    activeClass:"active",
    errorClass:"test"
  },
});
</script> 

1、因为activeClass、errorClass不为空，所以.active、.test均生效。

输出结果：
html相当于渲染为：

<div class="static active test"></div>

可见class的顺序（从左至右）：
原html的class -> v-bind:绑定的class

2、在数组语法中也可以使用对象语法

<div v-bind:class="[{ active: isActive }, errorClass]"></div>

三、用在组件上

这里我们使用的是组件的全局注册。

<div id="example">
  <my-component class="class3" v-bind:class="{ class4: isActive }"></my-component>
</div>
  
<script type="text/javascript">
// 注册 (注册必须在 创建根实例之前，否则失效)
Vue.component('my-component', {
  template: '<div class="class1 class2">A custom component!</div>'
})

// 创建根实例
new Vue({
   el: '#example',
   data:{
     isActive:true,
   }
})
</script> 

执行后
HTML 被渲染为:

<div class="class1 class2 class3 class4">A custom component!</div>

可见使用组件时class的顺序（从左至右）：
注册组件时的class -> 使用组件时添加的class -> 使用组件时v-bind:绑定的class

绑定内联样式

---

一、对象语法

v-bind:style 的对象语法十分直观——看着非常像 CSS，但其实是一个 JavaScript 对象。

<div id="app">
  <div v-bind:style = "{color:mycolor,fontSize:myfontsize + 'px'}">666</div>
</div>

<!--这种方式效果 等效于上面；
说明vue遵循了css的规则,对绑定父元素的子元素也生效，-->
<!-- <div id="app" v-bind:style = "{color:mycolor,fontSize:myfontsize + 'px'}">666</div> -->

<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    mycolor:'red',
    myfontsize:'40',
  },
});
</script> 

执行结果：

直接绑定到一个样式对象通常更好，这会让模板更清晰：

优化上面代码：

<div id="app" v-bind:style = "styleObject">666</div>

<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    styleObject:{
      color:'red',
      fontSize:'40px',
    }
  }
});
</script> 

执行结果同上。

二、数组语法

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

<div id="app" v-bind:style = "[styleObj1,styleObj2]">666</div>

<script type="text/javascript">
var vm = new Vue({
  el:"#app",
  data:{
    styleObj1:{
      color:'red',
      fontSize:'40px',
    },
    styleObj2:{
      letterSpacing:"100px",
    }
  }
});
</script> 

执行结果：

三、自动添加前缀

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

四、多重值

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

display: -webkit-box;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;

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

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