Vue.js 使用 v-bind 实现按钮样式动态改变

在 Vue.js 中，可以使用 v-bind 指令来实现按钮样式的动态改变。具体实现方法如下：

1. 在 Vue 的模板中添加一个按钮，并使用 v-bind 指令绑定按钮的 class 属性：

<button v-bind:class='{ active: isActive }'>Click me</button>

2. 在 Vue 的 data 中定义一个 isActive 属性，用于控制按钮的样式：

data: {
  isActive: false
}

3. 在 Vue 的 methods 中定义一个 toggleActive 方法，用于切换 isActive 属性的值：

methods: {
  toggleActive: function () {
    this.isActive = !this.isActive
  }
}

4. 在按钮上添加一个点击事件，调用 toggleActive 方法来切换按钮的样式：

<button v-bind:class='{ active: isActive }' v-on:click='toggleActive'>Click me</button>

5. 在 Vue 的样式表中定义 .active 类的样式，用于改变按钮的样式：

.active {
  background-color: red;
  color: white;
}

通过以上几个步骤，就可以使用 v-bind 指令来实现按钮样式的改变了。当点击按钮时，isActive 属性的值会发生变化，从而改变按钮的样式。