Vue中样式绑定的几种方法

由于class与style均为样式属性，因此可以通过v-bind指令进行属性绑定，属性表达式结果的类型可以是对象或数组。本章就介绍下绑定样式属性的四种方法。

---

以对象的形式绑定class属性

<style>
  .actived{color:red;}
</style>

给标签动态添加属性名为actived的class属性，属性的样式用changeStyle变量表示，并将变量值设为false，意思是初始化的时候不显示actived标签名。

var vm=new Vue({
    el:'#app',
    data:{
      changeStyle:false
    },
    methods:{
      handleClick:function(){
       this.changeStyle=!this.changeStyle;}}})

继续给标签绑定click事件，点击div时，即可改变actived的样式，实现切换文本颜色功能。

 <div id="app">
    <div @click="handleClick" :class="{actived:changeStyle}">Hello World</div>
  </div> 

以数组的形式绑定样式

 <style>
 .actived{color:red;}
 </style>

首先，我在样式的数组中定义了两个变量，分别是active和current，并将其放入data中。

<div id="app">
    <div @click="handleClick" :class="[active,current]">Hello World</div>
</div>

将active中的属性名置为空，current的属性名设为currented，div上此时只有一个样式名currented。当我执行点击操作时，会对active中的属性名进行判断，由于目前的属性名为空，因此会将actived样式添加到div上。

var vm=new Vue({
    el:'#app',
    data:{
      active:'',
      current:'currented'
    },
    methods:{
      handleClick:function(){
        this.active=this.active==='actived'?'':'actived';}}})

---

以对象的形式绑定内联样式

在这里我直接将绑定到了一个统一的样式对象中。

<div id="app">
   <div :style="styleObj" @click="handleClick">Hello World</div>
</div>

在data中定义样式对象的具体样式

data:{
 styleObj:{
   color:'black'}
}

实现颜色的切换效果。

methods:{
   handleClick:function(){
     this.styleObj.color=this.styleObj.color==='black'?'red':'black';
}

 数组形式和对象形式类似，在这里就不演示了。