Vue 样式绑定

在 Vue.js 中，样式绑定是一种动态地为元素添加样式的方法。Vue 提供了多种方式来实现样式绑定，可以根据需求选择适合的方式。

静态样式绑定

最直接的方式，直接在模板中声明样式。

<div style="color: red; ">Hello Vue！</div>

动态样式绑定语法

1、对象语法

使用对象语法，可以根据数据的值动态地绑定样式。在对象语法中，键是样式属性名，值是一个计算属性或者直接是一个布尔值，根据布尔值的真假来决定是否应用该样式。

<div id="app" :style="{ color: activeColor, fontSize: fontSize + 'px' }">
  Hello Vue!
</div>

在Vue实例中：

new Vue({
  el: '#app',
  data: {
    activeColor: 'red',
    fontSize: 24
  }
});

2、数组语法

将多个样式对象应用到一个元素上。每个对象都是一个包含样式键值对的对象。

<div id="app" :style="[baseStyles, overridingStyles]">
  Hello Vue!
</div>

在Vue实例中：

new Vue({
  el: '#app',
  data: {
    baseStyles: {
      color: 'blue',
      fontSize: '14px'
    },
    overridingStyles: {
      fontSize: '16px'
    }
  }
});

3、使用CSS变量

:root {
  --main-bg-color: blue;
}

<div :style="{ 'background-color': var(--main-bg-color) }">
  Hello Vue!
</div>

4、响应式样式绑定

使用计算属性来创建响应式的样式绑定。

computed: {
  styleObject() {
    return {
      color: this.activeColor,
      fontSize: this.fontSize + 'px'
    };
  }
}

<div :style="styleObject">
  Hello Vue!
</div>

5、内联样式绑定

使用v-bind或简写:来绑定style属性

<div v-bind:style="{ color: activeColor, fontSize: fontSize + 'px' }">
  Hello Vue!
</div>

6、内联样式绑定

在样式对象中使用三元运算符来条件性地应用样式。

<div :style="{
  color: isDarkMode ? 'black' : 'white',
  fontSize: isBigFont ? '20px' : '16px'
}">
  Hello Vue!
</div>

样式绑定是 Vue 中非常强大的功能之一，它允许你根据数据的变化动态地更新元素的样式。这使得你可以创建交互性更强、更动态的用户界面。