用v-bind实现按钮切换颜色和字体

以下是一个使用 v-bind 实现按钮切换颜色和字体的示例：

HTML 代码：

<div id="app">
  <button v-bind:style="{ color: buttonColor, fontSize: buttonSize + 'px' }" v-on:click="changeStyle">Click me</button>
</div>

Vue.js 代码：

new Vue({
  el: '#app',
  data: {
    buttonColor: 'red',
    buttonSize: 20
  },
  methods: {
    changeStyle: function () {
      if (this.buttonColor === 'red') {
        this.buttonColor = 'blue';
        this.buttonSize = 30;
      } else {
        this.buttonColor = 'red';
        this.buttonSize = 20;
      }
    }
  }
})

解释：

• 使用 v-bind 绑定样式。通过对象语法，我们可以使用 JavaScript 表达式动态计算样式对象。在这个例子中，我们动态计算了字体颜色和字体大小。
• 使用 v-on 绑定点击事件。当按钮被点击时，调用 changeStyle 方法。
• 在 Vue 实例的 data 选项中定义 buttonColor 和 buttonSize。在 changeStyle 方法中，我们根据当前的 buttonColor 值来切换颜色和字体大小。