Vue实现active点击切换方法

Vue实现active点击切换的方法有很多种，这里介绍其中的两种：

方法一：使用v-bind:class

1. 在data中定义一个变量isActive，并设置初始值为false

<script>
export default {
  data() {
    return {
        isActive: false
    }
  }
}
</script>

2.通过v-bind:class将isActive与active类名绑定

<template>
  <div :class="{active: isActive}" @click="isActive=!isActive">点击切换</div>
</template>

3.给.active设置样式

.active {
    background-color: red;
    cursor: pointer;
}

示例：

<template>
  <div :class="{active: isActive}" @click="isActive=!isActive">点击切换</div>
</template>
<script>
export default {
  data() {
    return {
        isActive: false
    }
  }
}
</script>

<style>
.active {
    background-color: red;
    cursor: pointer;
}
</style>

方法二：使用v-bind:class与计算属性

1. 在data中定义一个变量isClick，并设置初始值为false

<script>
export default {
  data() {
    return {
        isClick: false
    }
  },
  computed: {
      isActive() {
          return this.isClick ? 'active' : ''
      }
  }
}
</script>

2.通过v-bind:class将isActive与active类名绑定

<template>
  <div :class="isActive" @click="isClick=!isClick">点击切换</div>
</template>

3.给.active设置样式

.active {
    background-color: red;
    cursor: pointer;
}

示例：

<template>
  <div :class="isActive" @click="isClick=!isClick">点击切换</div>
</template>
<script>
export default {
  data() {
    return {
        isClick: false
    }
  },
  computed: {
      isActive() {
          return this.isClick ? 'active' : ''
      }
  }
}
</script>
<style>
.active {
    background-color: red;
    cursor: pointer;
}
</style>

以上两种方法都是常用的Vue实现active点击切换的方法，根据实际的需求可以选择其中的一种方法来使用。