vue中，动态绑定样式——动态绑定style写法 & 动态class写法

时间：2024-12-27 07:00:18

vue中，动态绑定样式——动态绑定style写法 & 动态class写法

1、动态绑定style写法

注意:

  • 凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
  • 除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff'而不是 backgroundColor:#00a2ff
1.1、对象
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }"></div>

<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>
1.2、数组
<div :style="[baseStyles, overridingStyles]"></div>

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>
1.3、三元运算符
<div :style="{color:(index == 1 ? conFontColor:'#000')}"></div>

<div :style="[{color:(index == 1 ? conFontColor:'#000')},{fontSize:'18px'}]"></div>

<div :style=" === activeLayerName?'font-weight:700' : 'font-weight:400'"></div>

<!-- 写法一 -->
<div :style="[{float: id === '12' ? 'left:'right}]"></div>

<!-- 写法二 -->
<div :style="float:  === 20 ? 'height:64px' : 'height:32px' "></div>

<!-- 写法三 -->
<div :style="{border:( nameId === ?'2px solid #4C78FF': 'red')}"></div>
1.4、绑定data对象
<div :style="styleObject"></div>

<script>
    data() {
        return{
          styleObject: {
            color: 'red',
            fontSize: '14px'
          }  
        }
    }
</scrip>
2、动态class写法
2.1、对象方法
<!-- isActive —— true/false -->
<div :class="{ 'active': isActive  }">{{name}}</div>
2.2、判断是否绑定一个active
<div :class="{'active' : isActive == -2}"  >{{name}}</div>

<div :class="{'active' : isActive == }"  >{{}}</div>
2.3、绑定并判断多个
2.31、第一种：用逗号隔开
<div :class="{ 'active': isActive, 'user': isUser }"></div>
2.32、放在data里面
<div :class="classObject">{{name}}</div>

<script>
data() {
  return {
    classObject:{ active: true, user:false }
  }
}
</script>
2.33、使用computed属性
<div :class="classObject">{{name}}</div>

<script>
data() {
  return {
    isActive: true,
    isUser: false
  }
},
computed: {
  classObject: function () {
    return {
      active: ,
      user:
    }
  }
}
</script>
2.4、数组方法
2.41、单纯数组
<div :class="[isActive,isUser]">{{name}}</div>

<script>
data() {
  return{
    isActive:'active',
    isUser:'user'
 }
}
</script>
2.42、数组与三元运算符结合判断选择需要的class
  • 注意：三元运算符后面的“：”两边的class需要加上单引号，否则不能正确渲染

:class="[isActive?‘active’:’’]"
或者
:class="[isActive1?‘active’:’’]"
或者
:class="[isActiveindex?‘active’:’’]"
或者
:class="[isActive==index?‘active’:‘otherActiveClass’]"

2.43、数组对象结合动态判断

//前面这个active在对象里面可以不加单引号，后面这个sort要加单引号
:class="[{ active: isActive }, ‘sort’]"
或者
:class="[{ active: isActive1 }, ‘sort’]"
或者
:class="[{ active: isActiveindex }, ‘sort’]"

相关文章