vue class与style绑定

vue针对class和style的处理做了增强处理，表达式结果除了字符串还可以是对象或者数组。

绑定html class

<div id="app">
  <div v-bind:class="{active: isActive}">active</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

var vm = new Vue({
  el: '#app',
  data: {
    isActive:true
  }
});

</script>

上面isActive属性的真假控制active是否加入dom

绑定数据对象不必内联定义在模板里

如下：

<div id="app">
  <div v-bind:class="classObj">active</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

var vm = new Vue({
  el: '#app',
  data: {
    classObj:{
    active: true,
    'text-danger':true
    }
  }
});

</script>

也可以绑定一个返回对象的计算属性

<div id="app">
  <div v-bind:class="classObj">active</div>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script type="text/javascript">

var vm = new Vue({
  el: '#app',
  data: {
    isActive: true,
    error:true
  },
  computed:{
  classObj:function(){
  return {
  active1:this.isActive && !this.error,
  'text-danger':this.error
  }
  }
  }
});

</script>

这里的class绑定了一个计算属性，计算属性返回一个对象，这种方式更常用且功能更强大。

数组class

v-bind:class可以是一个数组，以下示例

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

</div>

var vm = new Vue({
  el: '#app',
  data: {
    activeClass: 'active',
    errorClass:'text-danger'

  }

}）；

可根据条件切换列表中的class，使用三元表达式

<div id="app">
  <div v-bind:class="[isActive ? activeClass: '', errorClass]">active</div>

</div>

也可写成

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

var vm = new Vue({
  el: '#app',
  data: {
  isActive:false,
    activeClass: 'active',
    errorClass:'text-danger'
  }

});