<div class="static" :class="{ active: isActive, 'text-danger': hasError }"> </div> <view class="left" :class="{red: item.order_type==0,blue:item.order_type==2}"> <p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p>
<li class="slider" v-bind:style="{marginLeft: leftIndex}"></li> data: { leftIndex: '0.167%' }
<div v-bind:style="styleObject"></div> data: { styleObject: { color: 'red', fontSize: '13px' } }
注意:font-size写成fontSize,否则会出错
数组语法<div :class='["classify",current=="0" ? "active" : ""]' @click='current=0'>课程</div>
注意:数组中的classify如果不加引号的话,代表的是data中的一项,并不是类名,将classify加上双引号,变成字符串就可以变成类名
三元运算符style三元运算符
<p :style="{'color': (checkIndex3==m.txt ? '#3d8cff':'#BBBBBB')}">{{m.txt}}</p> <span v-bind:style="{display:isActive ? 'block':'none'}">hello</span> :style="{left: 390 + 'px',color: brandnamesum == 16 ? 'red' : ''}" <span :style="{display:isActive ? 'block':'none'}">hello</span>
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>
注意:active前要加一个空格(必须有),字符串拼接时,两个字符串之间要有空格
设置背景图片的方式方法一
<view class="card" :style="{backgroundImage: 'url('+cardsInfo.bg+')',backgroundRepeat:'no-repeat',backgroundSize:'100% 100%'}"> </view>
方法二
<div :style="backgroundDiv"><div>
data() { return { backgroundDiv: { backgroundImage:'url(' + require('./images/xxx..jpg') + ')', backgroundRepeat:'no-repeat', backgroundSize:'100% 100%' } }