VUE3 style 用法

最新推荐文章于 2024-06-22 11:59:18 发布

GIS-CL

最新推荐文章于 2024-06-22 11:59:18 发布

阅读量4.4k

点赞数

文章标签：前端 javascript html

本文链接：https://blog.csdn.net/weixin_46730573/article/details/125832534

版权

本文详细介绍了Vue.js中动态绑定样式的五种常见方法：字符串语法、对象用法、将样式放在data中、计算属性及数组语法。通过实例展示了如何在Vue组件中灵活地改变元素的样式，包括颜色、字体大小等属性，为前端开发中的动态界面设计提供了参考。

摘要由CSDN通过智能技术生成

style第一种语法字符串

<div style="color:red; background:yellow">style第一种语法字符串</div>

style第二种对象用法

<div :style="{ color: activeColor, fontSize: fontSize + 'px' }">style第二种 对象用法</div>

data() {
        return {
            activeColor: 'red',
            fontSize: 30
        }
    }

style第三种放在data中

<div :style="styleObject">style第三种 放在data中</div>

data() {
        return {
            styleObject: {
                color: 'red',
                fontSize: '13px'
            }
        }
    }

style第四种放在计算属性computed中

<div :style="Objectstyle">第四种 放在计算属性computed中</div>

computed:{
        Objectstyle(){
            return{
                color: 'yellow',
                fontSize: '20px',
                'background-color': 'red'
            }
        }
    }

style第五种数组语法

<div :style="[styleObject, {fontSize:'30px'}]">style第五种 数组语法</div>

data() {
        return {
            styleObject: {
                color: 'red',
                'background-color': 'yellow'
            }
        }
    },