【vue】class、style的用法

2021-04-07 15:53:17 阅读：167 来源： 互联网

对象语法

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

标签：style,vue,运算符,字符串,三元,data,class,类名
来源： https://blog.51cto.com/15142266/2690374

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9