vue 点击添加class

在Vue中，我们可以使用`v-bind`指令来动态添加CSS类。具体步骤如下：

1. 首先，在Vue的数据模型中定义一个变量，用于保存是否应用特定的CSS类。例如，我们可以定义一个名为`isClicked`的变量，并将其初始化为`false`。

2. 接下来，将`v-bind:class`指令添加到需要应用CSS类的元素上。`v-bind:class`指令的值可以是一个对象，用于指定需要添加的CSS类。我们可以将该对象的键设置为CSS类名，将值设置为`true`或`false`，以确定是否应用该类。例如，我们可以使用以下代码将`isClicked`变量与元素的CSS类绑定：

<div v-bind:class="{ 'clicked': isClicked }">点击我添加class</div>

3. 现在，我们需要为点击事件添加一个方法，用于在点击时修改`isClicked`变量的值。我们可以使用`v-on`指令来监听点击事件，并将其与一个自定义的方法进行绑定。例如，我们可以添加以下代码来实现这一功能：

<div v-bind:class="{ 'clicked': isClicked }" v-on:click="changeClass">点击我添加class</div>

在Vue的实例中，我们需要定义一个名为`changeClass`的方法，该方法将在点击元素时被调用。在该方法内部，我们可以通过修改`isClicked`变量的值来实现应用或移除CSS类。例如，我们可以使用以下代码定义`changeClass`方法：

methods: {
  changeClass() {
    this.isClicked = !this.isClicked; // 在每次点击时切换变量值
  }
}

4. 最后，我们可以通过点击元素来测试是否成功应用了CSS类。在每次点击时，`isClicked`变量的值将被切换，因此，当元素被点击时，它将动态地添加或移除`clicked`类。这样，我们就完成了使用Vue来实现通过点击添加CSS类的功能。