【vue】中class、style的用法

目录

• 三元表达式
• 对象形式
• 数组形式
• 字符串拼接
• vue中设置背景图片的方式
  • 方法一
  • 方法二

三元表达式

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>

对象形式

<view class="left" :class="{red: item.order_type==0,blue:item.order_type==2}">

数组形式

<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中设置背景图片的方式

方法一

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