Vue 框架之动态绑定 css 样式实例分析

Vue 框架之动态绑定 CSS 样式实例分析

在 Vue 框架中，我们可以通过动态绑定 CSS 样式来实现更加灵活的页面布局和效果。

Vue 样式绑定方式

Vue 框架中，有三种方式可以动态绑定 CSS 样式，分别为类绑定、样式绑定和内联样式绑定。

类绑定

通过:class语法可以绑定类名到元素上，例如：

<div :class="{ active: isActive }"></div>

在上述代码中，active类将会在isActive为true时动态绑定到div元素上。

你也可以绑定一个变量数组来动态绑定多个类名：

<div :class="[classA, classB]"></div>

样式绑定

通过:style语法可以将一个对象的样式绑定到元素上，例如：

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

在上述代码中，color和fontSize样式将会在相应变量值改变时动态地绑定到div元素上。

我们也可以直接绑定样式对象来动态绑定多个样式：

<div :style="styleObject"></div>

内联样式绑定

对于元素的内联样式绑定，我们可以直接使用v-bind指令，例如：

<div v-bind:style="{ display: show }"></div>

在上述代码中，display内联样式将会在show变量为true时动态绑定到div元素上。

示例分析

示例一：绑定动态类

在这个例子中，我们将会使用一个按钮来动态切换显示的内容。按钮被点击时，内容区域将变为橙色背景，同时出现提示信息。再次点击按钮时，则会恢复默认白色背景和隐藏提示信息。

首先，我们需要创建一个样式表来定义两种不同的颜色和一个边框样式：

.orange-background {
  background-color: orange;
}

.white-background {
  background-color: white;
}

.box-border {
  border: 1px solid black;
}

接着，在 Vue 组件内部，我们需要定义一个变量来记录当前的状态：

data() {
  return {
    isActive: false
  };
}

然后，在模板中，我们需要使用v-bind:class指令来动态绑定类名：

<template>
  <div :class="[{ 'orange-background': isActive }, 'box-border']">
    <button @click="isActive = !isActive">
      {{ isActive ? 'Hide' : 'Show' }} details
    </button>
    <p style="display: none;" v-show="isActive">Here are the details!</p>
  </div>
</template>

在上述代码中，我们使用了一个数组语法来同时绑定多个类名，包括一个动态的orange-background类名和一个静态的box-border类名。

当点击按钮时，isActive变量会被取反，导致动态类名的绑定状态发生变化。同时，提示文本也会被切换显示状态，此时如果isActive为true，则提示文本会被显示出来。

示例二：绑定多个样式并使用计算属性

在这个例子中，我们将会使用一个输入框和两个按钮，分别用来控制一个盒子的宽和高。

首先，我们需要定义一个计算属性来记录当前输入框的值：

computed: {
  boxStyles() {
    return {
      width: this.width + 'px',
      height: this.height + 'px'
    };
  }
}

然后，在模板中，我们可以在样式绑定中使用这个计算属性来动态绑定宽高样式：

<template>
  <div>
    <div class="box" :style="boxStyles"></div>
    <div>
      <label>Width:</label>
      <input type="number" v-model.number="width"><br>
      <label>Height:</label>
      <input type="number" v-model.number="height">
    </div>
    <div>
      <button @click="width += 10">Increase Width</button>
      <button @click="height += 10">Increase Height</button>
    </div>
  </div>
</template>

<style>
.box {
  background-color: grey;
}
</style>

在上述代码中，我们使用了:style语法来绑定boxStyles计算属性所返回的对象，使得盒子的宽高能够实现实时更新。同时，我们也定义了两个采用v-model指令的输入框和两个改变宽高的按钮。

当我们使用其中一个按钮来更改宽高时，计算属性boxStyles的返回值会随即更新，从而动态更新盒子的宽高样式。