vue binding style in several ways

vue binding style (Chinese API: https://www.runoob.com/vue2/vue-class-style.html )

Object syntax

1.v-bind: class set an object, dynamic class switch

<div :class="{'active':isActive}">xxx</div> Whether the style works, according to the Boolean value is true whether isActive

2.:class class can coexist

<div class = "static": class = " { 'Active': isActive, 'error': the isError }"> XXX </ div> 
When isActive is true, isError is false, and styles for static isActive. 
When isActive is false, isError is true, and as static style isError. 
When isActive is true, the isError is true, and as static style isActive, isError

3.: class can bind object data

<div class="static" :class="classobj">xxx</div>
export default {
  data(){
    return{
      classObj : {// can bind directly to an object, the object which has a plurality of patterns
        active:true,
        error:false
      }
    }
  }
}

 

Array syntax

4.v-bind: class provided an array 

Using an array of data necessary to specify the rename

 

<div class="static" :class="[activeCls,errorCls]">xxx</div>
export default {
  data(){
    return{
      activeCls : 'active', // div style in the active pattern corresponding to the renamed activeCls
      errorCls:'error'
    }
  }
}
<style>
    .active{xxx}
    .error{xxx}
</style>

 

5. ternary expressions with

<template>
  <div id="app">
    <div class="static" :class="[isActive?activeCls:errorCls,baseClass]">xxx</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isActive:true,
      activeCls: 'active', // isActive when true, the corresponding style activeCls performs active and executes a corresponding style baseclass baseClass
      errorCls: 'error', // isActive when the value is false, performs errorCls corresponding error pattern corresponding to the pattern and performs baseClass baseclass
      baseClass:'baseclass'
    }
  }
}
</script>
<style scoped>
.active{
  background: red;
}
.error{
  color: white;
}
.baseclass{
  text-align: center;
}
</style>

 

A triplet of expressions

<div class="coupon-img" :class="[item.ticket_type==1?'thirty-yuan':'fifty-yuan']">

 

6. array syntax used in object syntax

<template>
  <div id="app">
    <div class="static" :class="[{'active':isActive},baseClass]">xxx</div>
  </div>
</template>
<script>
export default {
  data(){
    return{
      isActive : true, // since isActive is true, in active form and style so baseClass baseclass corresponding to active, baseclass
      activeCls:'active',
      baseClass:'baseclass'
    }
  }
}
</script>
<style scoped>
.active{
  background: red;
}
.baseclass{
  text-align: center;
}
</style>

 

7. The definition of an array of different patterns acquired through different index values

<div class="icon" :class="classMap[support.type]"></div>
    created () {
      this.classMap = ["decrease", "discount", "guarantee", "invoice", "special"]
    },
    The change support.type array, the index pattern corresponding to classMap

 

Binding inline style

<div id="app">
    <div :style="{color:cl,background:bk}">你好吗？</div></div>
<script>
    new view ( { 
        el : '#app'
        data:{
            cl:'red',
            bk:'yellow'
        }
    })
</script>

 

Bind directly to a style object, so that a clearer template:

<div id="app">
        <Div: style = "testObj"> How are you? </ Div>
</div>
<script>
    new view ( { 
        el : '#app'
        data:{
            testObj: {
                color:red;
                background:yellow;
            }
        }
    })
</script>