在vue动态样式设置
提示:主要是工作中使用到样式动态修改方式,做归纳
文章目录
前言
提示:这里可以添加本文要记录的大概内容:
用于工作中样式绑定,切换。项目开发一般是vue.js : 其他博主
提示:以下是本篇文章正文内容,下面案例可供参考
一、内联样式绑定
注意style样式中带
-
的,在对象中-
后面的要大写。background-color要写成backgroundColor
<div :style="{ backgroundColor: bgColor, color: fontColor }">Dynamic Color Example</div>
data() {
return {
bgColor: 'lightblue',
fontColor: 'darkblue'
};
},
1.绑定样式对象
1).样式对象
直接动态绑定样式对象
:style=“dynamicStyles”
<div :style="dynamicStyles"></div>
在 Vue 实例中:
data() {
return {
dynamicStyles: {
color: 'red',
fontSize: '16px'
}
};
}
1).样式对象数组
使用一个数组来动态地设置元素的样式。数组中的每个元素都是一个包含样式对象的变量或表达式。
<div :style="[baseStyles, dynamicStyles]"></div>
在 Vue 实例中:
data() {
return {
baseStyles: {
backgroundColor: 'blue'
},
dynamicStyles: {
color: 'red',
fontSize: '16px'
}
};
}
示例:在Vue.js中设置元素的文字颜色,可以使用内联样式绑定的方式 ; 格式 如下
:style="{ color: isActive ? 'red' : '' }"
或
:class="{ colorClass: isActive }"
2.绑定元素的 Class
通过绑定类名来控制元素的样式。首先,定义一些 CSS 类来设置不同的文字颜色:colorClass
red-text
default-text
根据isActive 切换样式
类
代码如下(示例):<div :class="isActive ? 'color' : 'errorColor'"></div>
<div :class="isActive ? 'color' : 'errorColor'"></div>
:class="{ colorClass: isActive }"
// 或
<div :class="{ 'red-text': currentHandleId === item.id, 'default-text': currentHandleId !== item.id }">内容</div>
// 样式
<style>
.color{
}
.errorColor{
}
// 样式:colorClass red-text default-text
</style>
3.计算属性
使用计算属性可以更清晰地控制条件样式。
首先,在 Vue 实例中定义计算属性:
computed: {
textColor() {
return this.currentHandleId === this.item.id ? 'red' : '';
}
}
然后在模板中使用该计算属性:
<div :style="{ color: textColor }">内容</div>
示例: 如下
<div :style="wrongGroupTotalEleInterStyle"></div>
computed: {
wrongGroupTotalEleInterStyle() {
return {
'--stateColor': '#000'
}
}
}
二、绑定元素的 Class
1.引入库
代码如下(示例):
<div :class="isActive ? 'color' : 'errorColor'"></div>
三、动态样式对象 css变量
使用 CSS 变量(也称为自定义属性)并将其绑定到元素的样式中,在vue
一般都是绑定到元素style
上
:root {
--element-color: blue;
}
通过 v-bind:style 或者 :style 将 CSS 变量绑定到元素的样式中,例如:
<div :style="{ '--element-color': someVariable }">Hello</div>
示例中,someVariable
是一个 Vue 实例中
的变量,你可以根据需要来动态地设置它。然后,你可以在 CSS
中使用这个变量:
div {
color: var(--element-color, black); /* 使用变量 --element-color,并提供一个备用值 */
}
这样,元素的颜色就会根据 someVariable
的值而动态变化。如果 someVariable
的值改变了,元素的颜色也会相应地更新。
总结
提示:这里对文章进行总结:
一般单个样式:
<div :style="{ backgroundColor: bgColor, color: fontColor }">Dynamic Color Example</div>
多个样式:
<div :class="{ 'highlighted': isHighlighted }">Dynamic Color Example</div>
或者使用js获取dom 修改styley也是可以的