vue style动态绑定

作者：潮起潮落发布日期:2026-06-18 浏览:143

<template>
  <div :style="dynamicStyle">这是一段动态样式绑定的文本</div>
</template>

<script>
export default {
  data() {
    return {
      dynamicStyle: {
        color: 'red',
        fontSize: '20px'
      }
    };
  }
};
</script>

<style scoped>
/* 这里可以添加一些额外的样式 */
</style>

解释说明：

:style 是 Vue.js 中用于动态绑定样式的语法糖，它会将对象中的键值对作为 CSS 样式应用到元素上。
在这个例子中，dynamicStyle 是一个包含 CSS 属性的对象，通过 :style="dynamicStyle" 绑定到 <div> 元素上。
data() 函数返回的对象中定义了 dynamicStyle，其中包含了 color 和 fontSize 两个属性，分别设置了文本颜色为红色和字体大小为 20px。

上一篇：vue3 ref获取元素

下一篇：vue lodash