Vue中使用v-bind动态切换按钮样式的技巧

2023-11-27 17:22:09

使用 Vue.js 轻松实现按钮样式的动态切换

在 Vue.js 中，v-bind 指令为动态切换按钮样式提供了一种简洁而强大的方式。本文将深入探讨如何使用 v-bind 绑定样式类，并通过 JavaScript 代码控制它们的添加和删除。

v-bind 指令：绑定样式类

要绑定样式类，使用 v-bind 指令的 class 属性：

<button v-bind:class="className"></button>

className 是表示要绑定的样式类的字符串。它可以是一个简单的字符串或包含多个样式类的数组。

通过 JavaScript 代码控制样式类

可以通过 Vue 的 $set 方法，使用 JavaScript 代码控制样式类的添加和删除：

this.$set(this.data, 'className', 'newClassName');

其中：

data 是包含样式类的数据对象
className 是样式类的名称
newClassName 是新的样式类

示例代码

示例 1：绑定 selected 样式类

<template>
  <button v-bind:class="{ 'selected': isSelected }">按钮</button>
</template>

<script>
export default {
  data() {
    return {
      isSelected: false
    }
  },
  methods: {
    toggleSelected() {
      this.isSelected = !this.isSelected;
    }
  }
};
</script>

当按钮被点击时，selected 样式类将被添加或删除。

示例 2：通过 JavaScript 代码控制样式类的添加和删除

<template>
  <button id="button">按钮</button>
</template>

<script>
export default {
  mounted() {
    const button = document.getElementById('button');
    button.addEventListener('click', () => {
      if (button.classList.contains('selected')) {
        button.classList.remove('selected');
      } else {
        button.classList.add('selected');
      }
    });
  }
};
</script>