Vue.js v-bind实现按钮颜色和字体动态切换

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 值来切换颜色和字体大小。