一、:class 动态绑定类名
v-bind:class（缩写为 :class）可以动态地绑定一个或多个 CSS 类名。
1. 对象语法
通过对象语法，可以根据条件动态切换类名。
海绵宝宝不喜欢侬，喜欢章鱼哥。export default { data() { return { isActive: true, hasError: false, }; }, }; .greenText { color: green; } .red-text { color: red; }
- greenText：当 isActive 为 true 时，添加 greenText 类。
- red-text：当 hasError 为 true 时，添加 red-text 类。
效果图：
2. 数组语法
通过数组语法，可以同时绑定多个类名。
海绵宝宝不喜欢侬，喜欢章鱼哥。export default { data() { return { textClass: 'greenText', bgcClass: 'pinkBgc', }; }, }; .greenText { color: green; } .pinkBgc { width: 300px; height: 200px; background-color: pink; margin: 200px auto; }
textClass 和 bgcClass 是数据属性，它们的值会同时作为类名绑定到元素上。
效果图：
3. 结合计算属性
当类名的逻辑较为复杂时，可以使用计算属性来动态生成类名对象。
海绵宝宝不喜欢侬，喜欢章鱼哥。export default { data() { return { isActive: true, hasError: true }; }, computed: { computedClass() { return { greenText: this.isActive && !this.hasError, 'text-red': this.hasError }; } } }; .greenText { color: green; } .text-red{ color: red; }
- greenText：isActive 为true并且hasError为false的时候生效；
- text-red：hasError 为true的时候生效；
效果图：
二、:style 动态绑定内联样式
v-bind:style（缩写为 :style）可以动态地绑定内联样式。
1. 对象语法
通过对象语法，可以直接绑定样式对象。
海绵宝宝不喜欢侬，喜欢章鱼哥。export default { data() { return { activeColor: 'red', fontSize: 12 }; }, };
activeColor 和 fontSize 是数据属性，它们的值会作为样式绑定到元素上。
效果图：
2. 数组语法
通过数组语法，可以同时绑定多个样式对象。
海绵宝宝不喜欢侬，喜欢章鱼哥。export default { data() { return { styles1: { color: 'red', fontSize: '14px' }, styles2: { fontWeight: 'bold', textDecoration: 'underline' } }; }, };
styles1 和 styles2 的所有样式都会绑定到元素上。
效果图：
3. 使用三元表达式
可以在 :style 中使用三元表达式，根据条件动态设置样式值。
海绵宝宝不喜欢侬，喜欢章鱼哥。export default { data() { return { isActive: true }; }, };
效果图：
4. 使用模板字符串
可以使用模板字符串动态拼接样式值。
海绵宝宝不喜欢侬，喜欢章鱼哥。export default { data() { return { isActive: false, fontSize: 12 }; }, };
效果图：
到此这篇关于前端 CSS 动态设置样式：:class、:style 等技巧(推荐)的文章就介绍到这了,更多相关css动态设置样式内容请搜索IT俱乐部以前的文章或继续浏览下面的相关文章，希望大家以后多多支持IT俱乐部！
