对象语法div class=static :class={ active: isActive, text-danger: hasError }/divview class=left :class={red: item.order_type==0,blue:item.order_type==2}p :style={color: (checkIndex...

对象语法

<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%'
       }
}