当前位置：首页 > article >正文

探索 Vue.js 的动态样式与交互：一个有趣的样式调整应用

article 2025/1/8 14:50:26

修改日期	备注
2025.1.3	初版

一、前言

今天和大家分享在 Vue.js 学习过程中开发的超酷的小应用。这个应用可以让我们通过一些简单的交互元素，如复选框、下拉菜单和输入框，来动态地改变页面上元素的样式哦让我们一起深入了解一下这个项目的实现过程，以及 Vue.js 在其中展现出的强大功能吧。

二、项目概览

我们先来看一下这个项目的整体结构，它由一个 HTML 文件和一个 JavaScript 文件组成，还搭配了一个简单的 CSS 文件来美化页面。

三、HTML 部分

以下是 HTML 文件的代码：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link rel="stylesheet" href="./style.css" />
    <script src="https://unpkg.com/vue@latest"></script>
  </head>
  <body>
    <div id="app">
      <label> <input type="checkbox" v-model="isPurple"/> Purple </label>

      <select v-model="textColor">
        <option value="">White</option>
        <option value="text-black">Black</option>
        <option value="text-orange">Orange</option>
      </select>

      <label>
        Circle Size
        <input type="number" v-model="size"/>
      </label>

      <label>
        Circle Rotate
        <input type="number" v-model="angle"/>
      </label>
      <div class="circle" :class="[circleClass, textColor]" :style="[circleSize, circleRotate]">Hi!</div>
    </div>

    <script src="./main.js"></script>
  </body>
</html>

在这个 HTML 文件中，有几个关键部分：

1. 输入元素

我们有一个复选框：
```
<label> <input type="checkbox" v-model="isPurple"/> Purple </label>
```
这里使用了 v-model="isPurple"，这个 v-model 指令可太重要啦！它将复选框的选中状态和 Vue 实例中的 isPurple 属性进行了双向绑定。这意味着，当我们勾选或取消勾选这个复选框时，isPurple 的值会相应地变成 true 或 false。
还有一个下拉菜单：
```
<select v-model="textColor">
  <option value="">White</option>
  <option value="text-black">Black</option>
  <option value="text-orange">Orange</option>
</select>
```
这个下拉菜单通过 v-model="textColor" 与 Vue 实例中的 textColor 属性进行双向绑定。当我们选择不同的选项时，textColor 的值就会变成相应的选项值，比如 “text-black” 或 “text-orange”。
以及两个输入框：
```
<label>
  Circle Size
  <input type="number" v-model="size"/>
</label>
<label>
  Circle Rotate
  <input type="number" v-model="angle"/>
</label>
```
这两个输入框分别与 size 和 angle 属性进行双向绑定，当我们输入数字时，这些数字会存储在对应的属性中。它们都使用了 v-model 指令，这是 Vue.js 中实现双向数据绑定的神器哦，能让用户输入直接影响到 Vue 实例的数据。

2. 样式绑定元素

<div class="circle" :class="[circleClass, textColor]" :style="[circleSize, circleRotate]">Hi!</div>

这里是最有意思的部分啦我们有一个 div 元素，它有一个静态的类 circle，同时使用了 :class 和 :style 来动态绑定类和样式。

:class="[circleClass, textColor]"：
- circleClass 是一个计算属性，它会根据 isPurple 的值添加一个 purple 类。
- textColor 是用户从下拉菜单中选择的值，会被作为类添加到这个 div 元素上。这样，我们可以通过用户的操作来动态改变元素的类，从而改变元素的颜色哦。
:style="[circleSize, circleRotate]"：
- circleSize 和 circleRotate 是另外两个计算属性，它们会根据用户输入的 size 和 angle 来改变元素的大小和旋转角度。是不是很神奇呢？

四、JavaScript 部分

这是 main.js 的代码：

const app = {
  data() {
    return {
      isPurple: false,
      textColor: "",
      size: 200,
      angle: 0,
    };
  },

  computed: {
    circleClass() {
      return {
        purple: this.isPurple,
      };
    },

    circleSize() {
      return {
        height: `${this.size || 100}px`,
        width: `${this.size || 100}px`,
        lineHeight: `${this.size || 100}px`,
      };
    },

    circleRotate() {
      return {
        transform: `rotate(${this.angle || 0}deg)`,
      };
    },
  },
};

Vue.createApp(app).mount("#app");

让我们来拆解一下：

1. 数据部分（data）

data() {
  return {
    isPurple: false,
    textColor: "",
    size: 200,
    angle: 0,
  };
}

这里定义了几个初始数据属性，isPurple 用于存储复选框的状态，textColor 存储文本颜色的选项值，size 存储圆形的大小，angle 存储旋转的角度。

2. 计算属性（computed）

circleClass()：
```
circleClass() {
  return {
    purple: this.isPurple,
  };
}
```
这个计算属性会根据 isPurple 的值返回一个对象，如果 isPurple 为 true，就会添加 purple 类。这样，我们就可以通过复选框的操作来改变元素的样式啦。
circleSize()：
```
circleSize() {
  return {
    height: `${this.size || 100}px`,
    width: `${this.size || 100}px`,
    lineHeight: `${this.size || 100}px`,
  };
}
```
这个计算属性会根据 size 的值生成一个对象，包含 height、width 和 lineHeight 的样式。这里还有个小技巧哦，使用 || 100 是为了防止 size 为空时出现样式异常，确保元素至少有一个初始大小。
circleRotate()：
```
circleRotate() {
  return {
    transform: `rotate(${this.angle || 0}deg)`,
  };
}
```
同样，这个计算属性根据 angle 生成一个包含 transform 属性的对象，用于旋转元素。这里也使用了 || 0 来避免 angle 为空时的问题。

五、CSS 部分

我们还有一个 style.css 文件，来看看它的代码：

.circle {
  background-color: purple;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  transition: all 0.5s;
}
.purple {
  background-color: purple;
}
.text-black {
  color: black;
}
.text-orange {
  color: orange;
}

.circle 类给我们的元素一个圆形的形状（通过 border-radius: 50%），还设置了背景色、布局和过渡效果。
.purple 类在元素添加了 purple 类时会生效，改变背景颜色。
.text-black 和 .text-orange 类会根据用户选择的文本颜色改变元素的文本颜色。

六、总结

通过这个项目，我们学到了好多 Vue.js 的重要知识呢以下是一些值得注意的要点：

1. 双向数据绑定（v-model）

v-model 让我们可以轻松地将用户输入和 Vue 实例中的数据关联起来，让数据在用户操作和 Vue 实例之间自由流动，大大简化了数据更新的流程。无论是复选框、下拉菜单还是输入框，使用 v-model 都让我们的开发变得轻松愉快。

2. 计算属性（computed）

计算属性真是个好帮手！它可以根据数据的变化自动计算出新的值，让我们能动态地生成类和样式对象。比如 circleClass 根据 isPurple 决定是否添加 purple 类，circleSize 和 circleRotate 根据用户输入生成样式，让我们的元素可以实时更新样式。

3. 动态样式绑定（:class 和 :style）