Vue 中 CSS 行内样式的写法总结

Vue 中 CSS 行内样式的写法总结

在 Vue 中，有两种主要方式为元素添加行内样式：静态样式和动态样式。

---

1. 静态样式

如果样式是固定的，可以直接使用普通的 HTML style 属性。

<div style="color: red; font-size: 16px;">静态样式</div>

---

2. 动态样式

如果样式需要根据 Vue 组件的数据或计算属性动态设置，需要使用 Vue 的 :style 绑定指令，它可以绑定到以下两种类型的值：

（1）对象语法

将样式声明为一个对象，CSS 的属性名使用 驼峰命名法（如 backgroundColor，不是 background-color）。

<div :style="{ color: textColor, fontSize: fontSize + 'px' }">动态样式（对象语法）</div>

• 示例解释：

  • color 和 fontSize 是对象的属性。
  • textColor 和 fontSize 是 Vue 组件中的数据或计算属性。

• 完整示例：

<template>
  <div :style="{ color: textColor, fontSize: fontSize + 'px' }">
    动态样式（对象语法）
  </div>
</template>

<script>
export default {
  data() {
    return {
      textColor: 'blue',
      fontSize: 20,
    };
  },
};
</script>

---

（2）数组语法

可以将多个样式对象组合为数组，同时应用多个样式。

<div :style="[baseStyle, additionalStyle]">动态样式（数组语法）</div>

• 示例解释：

  • baseStyle 和 additionalStyle 是 Vue 组件中的数据或计算属性，返回的是样式对象。

• 完整示例：

<template>
  <div :style="[baseStyle, additionalStyle]">
    动态样式（数组语法）
  </div>
</template>

<script>
export default {
  data() {
    return {
      baseStyle: { color: 'green', fontSize: '16px' },
      additionalStyle: { fontWeight: 'bold', backgroundColor: 'yellow' },
    };
  },
};
</script>

---

3. 动态样式结合条件语句

你可以在样式中使用条件表达式来动态更改样式。

对象语法中的条件表达式

<div :style="{ color: isActive ? 'red' : 'blue', fontSize: isLarge ? '24px' : '16px' }">
  条件样式
</div>

• 解释：

  • isActive 和 isLarge 是 Vue 组件中的布尔值。
  • 根据条件，动态设置样式值。

---

数组语法中的条件样式

<div :style="[isActive ? activeStyle : {}, baseStyle]">条件样式（数组语法）</div>

• 解释：

  • 如果 isActive 为 true，则应用 activeStyle。
  • 始终应用 baseStyle。

---

4. 注意事项

1. CSS 属性的命名：

   • 在 :style 中，CSS 属性名使用 驼峰命名法，如 backgroundColor、fontSize。

   • 如果属性名本身包含特殊字符（如 --custom-property），需要用引号括起来：

     <div :style="{ '--custom-property': 'value' }"></div>
     

2. 样式值的单位：

   • 如果样式需要单位（如 px, %），需要显式添加：

     <div :style="{ fontSize: fontSize + 'px' }"></div>
     

   • 如果值是 0，可以省略单位。

3. 动态计算样式：

   • 如果样式复杂，可以通过计算属性返回样式对象：

     <div :style="computedStyle">动态样式</div>
     

     computed: {
       computedStyle() {
         return {
           color: this.isActive ? 'red' : 'blue',
           fontSize: this.isLarge ? '24px' : '16px',
         };
       },
     }
     

4. 过渡效果：

   • 为动态样式添加平滑过渡，可以使用 CSS 的 transition 属性：

     <div :style="{ color: textColor, transition: 'all 0.3s ease' }">带过渡效果的动态样式</div>