Vue.js 中按钮点击改变文本：案例解析与优化

本文将通过一个简单的 Vue.js 案例，讲解如何使用按钮点击事件改变文本内容，并分析代码中 btnChange 值未改变的原因，并提供优化建议。

代码示例

<div :class="[change ? 'big' : 'small']">九九归一</div>
<input type="button" value="btnChange" @click="FontChange">

export default {
  name: "Practice",
  data() {
    return {
      time: '2023-8-24',
      Count: '<h1>123456</h1>',
      type: 'text',
      btnPrice: '显示',
      value: '666',
      change: 'true',
      btnChange: '变大'
    };
  },
  methods: {
    changeTime() {
      this.time = this.time + '明天';
    },
    changeInput() {
      if (this.type === 'text') {
        this.type = 'password';
        this.btnPrice = '显示';
      } else {
        this.type = 'text';
        this.btnPrice = '隐藏';
      }
    },
    changeValue() {
      console.log(this.value);
    },
    changeInputValue() {
      this.value = '888';
    },
    FontChange() {
      if (this.change) {
        this.change = false;
        this.btnChange = '变小';
      } else {
        this.change = true;
        this.btnChange = '变大';
      }
    }
  }
};

.big {
  font-size: 66px;
}
.small {
  font-size: 11px;
}

btnChange 值未改变的原因

根据提供的代码，可以看出 btnChange 的初始值是'变大'。在 FontChange 方法中，当 change 为 true 时，将 change 的值设为 false，并将 btnChange 的值设为'变小'，当 change 为 false 时，将 change 的值设为 true，并将 btnChange 的值设为'变大'。所以，点击 btnChange 按钮后，change 的值会改变，并且 btnChange 的值也会相应地改变。

优化建议

使用 v-model 指令简化代码
使用计算属性简化逻辑
使用 data() 方法初始化数据
使用 methods 方法定义函数
使用 computed 属性计算属性
使用 watch 属性监听数据变化
使用 template 模板语法
使用 style 样式
使用 script 脚本

总结

通过以上代码示例和分析，我们可以学习到如何在 Vue.js 中使用按钮点击事件改变文本内容，并了解一些代码优化技巧。