前端 CSS 动态设置样式：:class、:style 等技巧详解
一、:class 动态绑定类名v-bind:class（缩写为 :class）可以动态地绑定一个或多个 CSS 类名。
1. 对象语法
通过对象语法，可以根据条件动态切换类名。
<template>
<div :class="{ greenText: isActive, 'red-text': hasError }">海绵宝宝不喜欢侬，喜欢章鱼哥。</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: false,
};
},
};
</script>
<style>
.greenText {
color: green;
}
.red-text {
color: red;
}
</style>
[*]greenText：当 isActive 为 true 时，添加 greenText 类。
[*]red-text：当 hasError 为 true 时，添加 red-text 类。
效果图：
https://i-blog.csdnimg.cn/direct/49aceff5d6074b649890fb878b939414.png#pic_center
2. 数组语法
通过数组语法，可以同时绑定多个类名。
<template>
<div :class="">海绵宝宝不喜欢侬，喜欢章鱼哥。</div>
</template>
<script>
export default {
data() {
return {
textClass: 'greenText',
bgcClass: 'pinkBgc',
};
},
};
</script>
<style>
.greenText {
color: green;
}
.pinkBgc {
width: 300px;
height: 200px;
background-color: pink;
margin: 200px auto;
}
</style>
[*]textClass 和 bgcClass 是数据属性，它们的值会同时作为类名绑定到元素上。
效果图：
https://i-blog.csdnimg.cn/direct/ddc687c149be4b7ab6eea73f79a8b4fa.png#pic_center
3. 联合计算属性
当类名的逻辑较为复杂时，可以使用计算属性来动态天生类名对象。
<template>
<div :class="computedClass">海绵宝宝不喜欢侬，喜欢章鱼哥。</div>
</template>
<script>
export default {
data() {
return {
isActive: true,
hasError: true
};
},
computed: {
computedClass() {
return {
greenText: this.isActive && !this.hasError,
'text-red': this.hasError
};
}
}
};
</script>
<style>
.greenText {
color: green;
}
.text-red{
color: red;
}
</style>
[*]greenText：isActive 为true并且hasError为false的时候生效；
[*]text-red：hasError 为true的时候生效；
效果图：
https://i-blog.csdnimg.cn/direct/c86fc7b3086849f5b3014a3b9c398417.png#pic_center
二、:style 动态绑定内联样式
v-bind:style（缩写为 :style）可以动态地绑定内联样式。
1. 对象语法
通过对象语法，可以直接绑定样式对象。
<template>
<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">海绵宝宝不喜欢侬，喜欢章鱼哥。</div>
</template>
<script>
export default {
data() {
return {
activeColor: 'red',
fontSize: 12
};
},
};
</script>
[*]activeColor 和 fontSize 是数据属性，它们的值会作为样式绑定到元素上。
效果图：
https://i-blog.csdnimg.cn/direct/e17678561b804d21a3121746ea7142ed.png#pic_center
2. 数组语法
通过数组语法，可以同时绑定多个样式对象。
<template>
<div :style="">海绵宝宝不喜欢侬，喜欢章鱼哥。</div>
</template>
<script>
export default {
data() {
return {
styles1: {
color: 'red',
fontSize: '14px'
},
styles2: {
fontWeight: 'bold',
textDecoration: 'underline'
}
};
},
};
</script>
[*]styles1 和 styles2 的所有样式都会绑定到元素上。
效果图：
https://i-blog.csdnimg.cn/direct/338b0a024da14a4893c9adb7c7ae6d6d.png#pic_center
3. 使用三元表达式
可以在 :style 中使用三元表达式，根据条件动态设置样式值。
<template>
<div :style="{ color: isActive ? 'green' : 'red' }">海绵宝宝不喜欢侬，喜欢章鱼哥。</div>
</template>
<script>
export default {
data() {
return {
isActive: true
};
},
};
</script>
效果图：
https://i-blog.csdnimg.cn/direct/3dd5154b1b73411ba03093c49e6de602.png#pic_center
4. 使用模板字符串
可以使用模板字符串动态拼接样式值。
<template>
<div :style="`color: ${isActive ? 'green' : 'red'}; font-size: ${fontSize}px`" class="demo">海绵宝宝不喜欢侬，喜欢章鱼哥。</div>
</template>
<script>
export default {
data() {
return {
isActive: false,
fontSize: 12
};
},
};
</script>
效果图：
https://i-blog.csdnimg.cn/direct/86e33bf023144c6aac7ca45648ae3be0.png#pic_center
祝各人新年快乐！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。
页:
[1]