vue span

<template>
  <div>
    <!-- 使用 span 标签展示文本 -->
    <span v-bind:class="{ active: isActive }" v-on:click="toggleActive">
      这是一个带有样式的 span 元素
    </span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isActive: false, // 控制 span 是否有 active 类
    };
  },
  methods: {
    toggleActive() {
      this.isActive = !this.isActive; // 切换 isActive 的状态
    },
  },
};
</script>

<style>
/* 定义 active 类的样式 */
.active {
  color: red;
  font-weight: bold;
}
</style>

解释说明：

1. 模板部分 (<template>):

   • 使用了 <span> 标签来展示一段文本。
   • 通过 v-bind:class 动态绑定类名，根据 isActive 的值决定是否应用 active 类。
   • 使用 v-on:click 绑定点击事件，触发 toggleActive 方法。

2. 脚本部分 (<script>):

   • 定义了一个 data 属性 isActive，用于控制 span 是否有 active 类。
   • 定义了一个方法 toggleActive，用于切换 isActive 的布尔值。

3. 样式部分 (<style>):

   • 定义了 .active 类的样式，当 span 元素有 active 类时，文字颜色变为红色且加粗。

这个示例展示了如何在 Vue 中使用 span 标签，并结合 Vue 的指令实现动态样式和交互功能。