Vue:style和class绑定的高级用法

class绑定的高级用法

第一种 数组绑定多个class

<div :class="['active','normal']">数组绑定多个class</div>

第二种 数组包含对象绑class

    <div :class="[{active:isActive},'normal']">数组包含对象绑class</div>
    new Vue({
    el:"#root",
    data(){
      return{
        isActive:true
      }
    }

<div :class="[{active:isActive},'normal']">数组包含对象绑class</div>

    data(){
      return{
        isActive:false
      }
    }

第三种 数组包含方法绑定class

<div :class="[showWarning(),'normal']">数组包含对象绑定class</div>

 methods:{
      showWarning(){
        return 'warning'
      }

style绑定的高级用法

第一种 数组绑定多个style

<div :style="[warning,bold]">数组绑定多个style</div>

data(){
      return{
        warning:{
          color:'orange'
        },
        bold:{
          fontWeight:'bold'
        }
      }

第二种 数组包含方法绑定style

<div :style="[warning,mix()]">数组包含方法绑定style</div>

methods:{
      mix(){
        return{
          fontWeight:'bold',
          fontSize:'20px'
        }
      }