vue.js的class与style

今天来学习vue中 class 与 style 的用法。

先来整理下 class吧

---

Vue的class

语法：

v-bind:class ， 简写 ：【:class】。

这样就可以动态的去控制一个样式是否添加。

<div class="static"
     :class="{active:isActive,'text-danger':hasError}"
></div>
<script>
  let vm = new Vue({
    el:'.static',
    data:{
      isActive: true,
      hasError: false
    }
  })
</script>

复制代码

上面的例子所讲述的就是 isActive 如果为true， 那么就会添加上 active样式，同理，如果hasError 为 false ，那么就不会添加上 text-danger 这个样式。

当然，这些样式的控制，我们也可以不放在行间内，是否添加上样式，我们可以在数据中来控制。

<div class="app2" :class="classObj"></div>

let vm2 = new Vue({
    el:'.app2',
    data:{
      classObj:{
        active:true,
        'text-danger':true
      }
    }
  })

复制代码

以上的结果也是一样的。

当然还有，我们还可以放在计算属性中。

<div class="app3" :class="classObj"></div>

 let app3 = new Vue({
    el:'.app3',
    data:{
      isActive: true,
      error: null
    },
    computed:{  //  计算属性
      classObj(){
        return {
          active: this.isActive && !this.error,
          'text-danger': this.error && this.error.type === 'fatal'
        }
      }
    }
  })

复制代码

Vue 中 style

style 也就是行间的样式，那么接下来，我们来看一下行间样式要如何的去添加。

语法：

<div class="app4" :style="{'color':'red','fontSize':'40px'}">字号大小</div>

let app4 = new Vue({
    el:'.app4'
  })

复制代码

以下是通过数据传

<div class="app5" :style="{color:color,fontSize:fontSize + 'px'}">字号大小</div>

let app5 = new Vue({
    el:'.app5',
    data:{
      color:'red',
      fontSize:50
    }
  })

复制代码

样式对象

• 样式不用{} 包住

<div class="app6" :style="setStyle">设置字号</div>

let app6 = new Vue({
    el:'.app6',
    data:{
      setStyle:{
        color:'#ddd',
        fontSize:'100px'
      }
    }
  })


复制代码

转载于:https://juejin.im/post/5adfeb72f265da0b814b368d