Dynamic style binding --style and class

One ： dynamic style How to write it

Note before writing ：
All have - Of style Attribute names have to be humped , such as font-size To become fontSize
Except binding value , The values of other attribute names should be enclosed in quotation marks , for example
backgroundColor:#00a2ff To write backgroundColor:‘#00a2ff’.
One 1 object form
When we don't create separate css When you file , Write... Directly in the code

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>

 perhaps 
<div
:style="{
   boxSizing:'border-box',
   height:29+'px',
   top:(valch-1)*29+'px',
   background:chose(val.subjectCode),
   borderLeft:' 10px ' + ' solid ' + chose1(val.subjectCode
)}" > /<div>

One 2 Array form

<div :style="[baseStyles, overridingStyles]"></div>

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

One 3 Ternary operator

<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

<div 
	:style="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'">
</div>

<!--  Writing a  -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div>

<!--  Write two  -->
<div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div>

<!--  Write three  -->
<div :style="{border:( nameId ===item.id ?'2px solid #4C78FF': 'red')}"></div>

One 4 binding data object

<div :style="styleObject"></div>
<script>
    data() {
        return{
        //  stay data Define the initial style values in 
          styleObject: {
            color: 'red',
            fontSize: '14px'
          }  
        }
    }
</scrip>

Two ： class How to write it

Two 1 object form

	<!-- isActive — Decision value is ： true/false -->
	<div :class="{ 'active': isActive  }">{
   {name}}</div> 

Two 2 Determine whether to bind a active

<div :class="{'active' : isActive == -2}"  >{
   {name}}</div>
<div :class="{'active' : isActive == item.nameId}"  >{
   {item.name}}</div>

Two 3 Bind and judge multiple

Two 3.1 The first one is Separated by commas

 <div :class="{ 'active': isActive, 'user': isUser }"></div>

Two 3.2 Put it in data Inside

<div :class="classObject">{
   {name}}</div>
<script>
data() {
  return {
    classObject:{ 
    	active: true, 
    	user:false 
    }
  }
}
</script>

Two 3.3 Use computed Compute properties

<div :class="classObject">{
   {name}}</div>
<script>
data() {
  return {
    isActive: true,
    isUser: false
  }
},
computed: {
  classObject: function () {
    return {
      active: this.isActive,
      user:this.isUser
    }
  }
}
</script>

Two 4 Array form

Two 4.1 Simple arrays

<div :class="[isActive,isUser]">{
   {name}}</div>
<script>
data() {
  return{
    isActive:'active',
    isUser:'user'
 }
}
</script>

Two 4.2 Array and ternary operator are combined to judge and select the required class

Be careful ： After the ternary operator The colon ,
On both sides class You need to put single quotes , Otherwise, it will not render correctly

:class = " [ isActive ? 'active' : ' ']  "
 perhaps 
:class = "[ isActive1 ? 'active' : ' ' ] "
 perhaps 
:class= " [ isActiveindex ? 'active' : ' ' ] "
 perhaps 
:class=" [ isActive == index ? 'active' : 'otherActiveClass' ] "

Two 4.3 Array objects combined with dynamic judgment

// This is the front. active You can put no single quotation marks inside the object , This one at the back sort Use single quotes 、

:class="[
		     { active: isActive },  'sort'
    	]"
 perhaps 
:class="[
			{ active: isActive1 }, ‘sort’
		]"
 perhaps 
:class="[
			{ active: isActiveindex }, ‘sort’
		]"