三元表达式

style三元表达式

<p :style="{‘color‘: (checkIndex3==m.txt ? ‘#3d8cff‘:‘#BBBBBB‘)}">{{m.txt}}</p>

class三元表达式

<i class="iconfont"  :class="[isShow==‘password‘?‘icon-kejian‘:‘icon-bukejian‘]"></i>

<li v-for="(item, index) in nav" :key="index">
    <router-link :to="{ name: item.path }" :class="[item.title==activeTitle?‘active‘:‘‘]">{{
      item.title
    }}</router-link>
</li>

数组形式

<div :class=‘["classify",current=="0" ? "active" : ""]‘  @click=‘current=0‘>课程</div>

注意：数组中的classify如果不加引号的话，代表的是data中的一项，并不是类名，将classify加上双引号，变成字符串就可以变成类名

字符串拼接

<div :class="‘classify‘+(current==‘0‘?‘ active‘:‘‘)"  @click=‘current=0‘>课程</div>

注意：active前要加一个空格（必须有），字符串拼接时，两个字符串之间要有空格

【vue】中class、style的用法

原文：https://www.cnblogs.com/hellocd/p/14266672.html