1. Array form
<div :class='["classify",current=="0" ? "active" : ""]' @click='current=0'>Note: If the classify in the array is not quoted, it represents an item in the data, not the class name. Add double quotes to classify and turn it into a string to turn it into a class name.
2. String splicing
<div :class="'classify'+(current=='0'?' active':'')" @click='current=0'>课程</div>Note: Add a space before active (required). When splicing strings, there must be a space between the two strings.
3. Binding object
Usually, by binding an object to a class, the style can be switched dynamically. (true and false of isActive defined in data)
<div :class="{ active: isActive }">hello</div> handleClick(){ this.isActive = !this.isActive }
<i class="iconfont " :class="[current=='0'?'class1':'class2']"></i>Recommended, even if you add a string without adding {}, it is best to use [], {judgement} for binding class, and {} for style.
<span v-bind:style="{display:isActive ? 'block':'none'}">hello</span>
<div :style="{width:width,height:height}"></div>
Note: v-bind:style="{style name:'style value'}" must be in the form of a string
4.Array form
`<div :class=’[“classify”,current==“0” ? “active” : “”]’ @click=‘current=0’>Note: If the classify in the array is not quoted, it represents an item in the data, not the class name. Add double quotes to classify and turn it into a string to turn it into a class name.
5. Data labeling
`<div :class=’[“classify”,current==“0” ? “active” : “”]’ @click=‘current=0’><button class="tk" v-show="(active==0 || active==1) || active==2">退款</button>
6. Multiple judgment values
{
{item.biddingState==0?'报名中' : item.biddingState==1?'即将竞投': item.biddingState==2?'正在竞投':item.biddingState==3?'结束竞投':'竞投异常'}}