Vue知识点：动态绑定style

原创于 2022-06-23 15:36:58 发布 · 2.4k 阅读

CC 4.0 BY-SA版权

文章标签：

59 篇文章

订阅专栏

4 篇文章

订阅专栏

本文深入探讨Vue中关于元素样式的动态绑定，包括将style属性名转换为驼峰式，正确使用引号包裹属性值，对象绑定、数组绑定、三目运算符的运用，以及如何处理多重值和绑定data对象中的样式对象。通过实例解析，帮助开发者更好地理解和应用Vue的样式绑定机制。

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

注意:

凡是有-的style属性名都要变成驼峰式，比如font-size要变成fontSize
除了绑定值，其他的属性名的值要用引号括起来，比如backgroundColor:'#00a2ff’而不是 backgroundColor:#00a2ff

对象绑定：

html :style="{ color: activeColor, fontSize: fontSize + 'px' }"

html :style="{color:(index==0?conFontColor:'#000')}"

html :style="[baseStyles, overridingStyles]"

html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

html :style="{color:(index==0?conFontColor:'#000')}"

html :style="[{color:(index==0?conFontColor:'#000')},{fontSize:'20px'}]"

html :style="{ display: ['-webkit-box', '-ms-flexbox', 'flex'] }"

html :style="styleObject"

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