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

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="item.layerName === activeLayerName?'font-weight:700' : 'font-weight:400'"></div> <!-- 写法一 --> <div :style="[{ 
      float: id === '12' ? 'left:'right}]"></div> <!-- 写法二 --> <div :style="float: nameList.length === 20 ? 'height:64px' : 'height:32px' "></div> <!-- 写法三 --> <div :style="{ 
      border:( nameId ===item.id ?'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 == item.nameId}" >{ 
  {item.name}}</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: this.isActive, user:this.isUser } } } </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’]"

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/qdvuejs/10710.html