zoukankan      html  css  js  c++  java
  • 【vue】中class、style的用法

    三元表达式

    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%'
           }
    }
    
  • 相关阅读:
    专业英语阅读(二)
    专业英语阅读(一)
    高精度运算
    高精度运算——加减乘除阶乘
    python常见编程面试题汇总
    python线程
    反射
    单例模式
    生成器、迭代器
    python装饰器
  • 原文地址:https://www.cnblogs.com/hellocd/p/14266672.html
Copyright © 2011-2022 走看看