Vue中如何动态设置class和style实现个性化样式调整？

本文共计675个文字，预计阅读时间需要3分钟。

目录 + Vue动态设置class和style + Vue动态添加样式 + :style 和 :class + :style如下 + :class如下 + Vue动态设置class和style + // 动态class对象div :class={ 'isActive': true, 'red': isRed } /div + // 动态style对象div :style={ color: 'red' } /div + /Vue动态设置class和style

目录

• vue动态设置class、style
• vue动态添加样式 :style 和 :class
• :style如下
• :class如下

vue动态设置class、style

//动态class对象 <div :class="{ 'isActive': true, 'red': isRed }"></div> //动态style对象 <div :style="{ color: bgColor, fontSize: '18px' }"></div> //动态class数组 <div :class="['is-active', isRed ? 'red' : '' ]"></div> //动态style数组 <div :style="[{ color: bgColor, fontSize: '18px' }, { fontWeight: '500' }]"></div>

vue动态添加样式 :style 和 :class

动态添加可以采用：class 也可以采用：style

但是在一个长期维护的项目里面：style行内样式尽量避免。

<template> <div> <h2>动态添加类名</h2> <!-- 第一种方式:对象的形式 --> <!-- 第一个参数 类名， 第二个参数：boolean值 --> <!-- 对象的形式: 用花括号包裹起来，类名用引号， --> <!-- 优点: 以对象的形式可以写多个，用逗号分开 --> <p :class="{'sm' : true}">对象的形式</p> <p :class="{'sm' : false, 'lg': true}">对象的形式</p> <!-- 第二种方式:三元表达式 注意点：放在数组中，类名要用引号--> <p :class="[ controller.summary? 'sm' : 'lg' ]" >三元表示式</p> <!-- 第三种方式: 数组的形式 --> <p :class="[isTrue, isFalse]">数组的形式</p> <!-- 数组中用对象 --> <p :class="[{'sm': false}, isFalse]">数组中使用对象</p> <!--补充: class中还可以传方法，在方法中返回类名--> <p :class="setClass">通过方法设置class类名</p> </div> //-选中的一项更换背景色，其余兄弟元素没有背景色 <ul class="options-box"> <li v-for="(item,index) in hours" :key="index" @click="selectHour(item,index)" :class="{selected:readySelectHour === index}"> <span>{{item.name}}</span> </li> </ul> </template>

<script> export default { data () { return { isTrue: 'sm', isFalse: 'lg' }； }， method: { setclass () { return 'sm'; }, selectHour(itemhour,index){ this.hour = itemhour.name; this.readySelectHour = index; }, } } </script>

<style scoped> .sm { padding-top:10px; } .lg { padding-top:20px; } li{ text-align: center; line-height: 32px; font-size: 12px; &:hover { background-color:#f8f9fa; } &.selected{ background-color: #e6fff7; } } </style>

其次还可以用 :style

给一个div动态添加padding-top 我们可以用上面的：class方法 也可以用：style 的方法

还是以上面的class样式为例

:style如下

<div class="controller" :style="{paddingTop:controller.summary?'20px':'10px'}"></div>

:class如下

<div class="controller" :class="[controller.summary? 'lg':'sm']"></div>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持易盾网络。