vue.js 生成四位的验证码,单击按钮时换一个验证码

Vue.js 可以通过结合 Vue 的生命周期钩子、随机数生成和事件绑定轻松实现一个动态更换四位验证码的功能。下面是一个简单的示例：

首先，在模板 (template) 中，你可以创建一个输入框显示验证码以及一个按钮用于点击更换：

<template>
  <div>
    <input type="text" v-model="currentCode" :disabled="loading">
    <button @click="generateNewCode">获取新验证码</button>
    <span v-if="loading">加载中...</span>
  </div>
</template>

然后，在 Vue 实例的 script 部分，设置数据属性 `currentCode` 存储当前验证码，`loading` 表示是否正在生成新的验证码，并编写 `generateNewCode` 方法：

<script>
export default {
  data() {
    return {
      currentCode: '',
      loading: false,
    };
  },
  methods: {
    generateNewCode() {
      this.loading = true;
      // 使用JavaScript内置的 Math.random 方法生成四位数字验证码
      const newCode = Math.floor(1000 + Math.random() * 9000).toString();
      setTimeout(() => { // 等待一段时间模拟服务器延迟
        this.currentCode = newCode;
        this.loading = false; // 生成完成后停止加载指示
      }, 1000); // 模拟1秒后更新验证码
    },
  },
};
</script>

在这个例子中，每次用户点击按钮，`generateNewCode` 方法会被触发，它会设置 `loading` 为 `true` 显示加载状态，接着生成一个新的四位验证码并等待1秒后更新到输入框。这样就实现了每次点击按钮都会更换一个四位验证码的效果。