vue动态绑定css和style

最新推荐文章于 2025-06-11 20:06:40 发布

原创最新推荐文章于 2025-06-11 20:06:40 发布 · 796 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #css #javascript

VUE 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了Vue.js中动态绑定class和style的方法，包括单一样式、数组、对象的绑定方式，并通过示例代码展示了如何在模板中实现动态改变元素样式。同时，探讨了动态绑定style时如何设置字体大小等属性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

动态绑定css

// 普通绑定
<div calss="css">test</div>

// 动态绑定
<div :calss="css_1">test</div>

// 一起使用,鸡肋用法
<div :calss="[css_1, 'css']">test</div>

// 数组绑定
<div :calss="cssArr">test</div>

// 对象绑定
<div :calss="cssObj">test</div>
<script>
export default {
    data() {
        return {
            css_1: 'css',
            cssArr: ['css','css_a','css_b"],
            cssObj: {
                css: true,
                css_a: flase
            }
        }
    }
}
</script>
<style lang="less" scoped>
.css{
    background-color: #e9edf1;
}
.css_a{
    width: 200px
}
.css_b{
    height: 300px;
}
</style>

动态绑定style

// 普通写法
<div style="font-size: 10px;"></div>
// 动态绑定
<div :style="{fontSize: fontze + 'px'}"></div>

<script>
export default {
    data() {
        return {
            fontze: 10
        }
    }
}
</script>