VUE中如何动态绑定类名和样式

更新时间：2023年06月05日 10:31:59 作者：A7Feather

这篇文章主要介绍了VUE中如何动态绑定类名和样式问题，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

VUE动态绑定类名和样式

1、使用v-bind属性绑定class和style属性

2、动态类名两种方式：

对象形式：给对象属性赋boolean类型值
数组配合三元运算符，通过改变条件的真假实现类名的添加和删除

<template>
  <div>
    <div :class="classObj">动态绑定对象</div>
    <div :class="['namebox', activeStatus ? 'activeNamebox' : '']">
      动态绑定数组
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      classObj: {
        namebox: true,
        activeNamebox: false
      },
      activeStatus: false
    }
  }
}
</script>
<style>
.namebox {
  color: #777;
}
.activeNamebox {
  background-color: aquamarine;
}
</style>

3、动态样式的两种方式

对象形式
数组(包含样式对象)形式：可以同时添加多个样式对象

<template>
  <div>
    <div :style="styleObj1">对象形式</div>
    <div :style="[styleObj1, styleObj2]">数组形式</div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      styleObj1: {
        color: '#eee'
      },
      styleObj2: {
        textAlign: center
      }
    }
  }
}
</script>
<style></style>

动态绑定样式——动态绑定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']"

总结

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

vue使用混入定义全局变量、函数、筛选器的实例代码
本文主要是给大家分享利用混入mixins来实现全局变量和函数。这种方法优点是ide会有方法、变量、筛选器提示。对vue中利用混入定义全局变量、函数、筛选器的相关知识感兴趣的朋友，跟随小编一起看看吧
2019-07-07
一起来看看Vue的核心原理剖析
这篇文章主要为大家详细介绍了Vue的核心原理，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下，希望能够给你带来帮助
2022-03-03
vue transition 在子组件中失效的解决
今天小编就为大家分享一篇vue transition 在子组件中失效的解决，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11
关于vue组件事件属性穿透详解
今天小编就为大家分享一篇关于vue组件事件属性穿透详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-10-10
vue引入组件的几种方法汇总
这篇文章主要介绍了vue引入组件的几种方法汇总,包括常用的局部引入,这里需要注意在哪个页面需要就在那个页面引入、注册、使用,本文结合示例代码给大家介绍的非常详细,需要的朋友参考下吧
2023-10-10
Vuejs第十一篇组件之slot内容分发实例详解
这篇文章主要介绍了Vuejs第十一篇之slot内容分发组件详解的相关资料
2016-09-09
Vue-Router基础学习笔记(小结)
这篇文章主要介绍了Vue-Router基础学习笔记(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-10-10
在Vant的基础上实现添加表单验证框架的方法示例
这篇文章主要介绍了在Vant的基础上实现添加验证框架的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-12-12
elementUI的table表格改变数据不更新问题解决
最近在做vue的项目时发现了一个问题，今天就来解决一下，本文主要介绍了elementUI的table表格改变数据不更新问题解决，感兴趣的可以了解一下
2022-02-02
vue3中使用v-model实现父子组件数据同步的三种方案
这篇文章主要介绍了vue3中使用v-model实现父子组件数据同步的三种方案,如果只有一个匿名v-model的传递的话,可以使用vue3.3新添加的编译宏,defineModel来使用,每种方案结合示例代码给大家介绍的非常详细,需要的朋友可以参考下
2023-10-10