vue登录获取验证码

<el-form-item label="验证码" prop="imgcode">
        <el-input
          type="password"
          v-model="ruleForm.imgcode"
          autocomplete="off"
        ></el-input>
      </el-form-item>
      <el-form-item prop="imgcode">
        <img :src="img" @click="imgFn" alt="" />
      </el-form-item>

首先要写一个input输入框，用来输入验证码，prop给想对应的字段，下面跟着img标签用来显示验证码的图片

img: "http://bw.gsruiying.com.cn/adminapi/captcha_pro?1608801075000",

在vue模板当中return里面定义一个中间变量img，用来做默认打开页面显示和点击切换验证码的效果

created() {
    this.img =
      "http://bw.gsruiying.com.cn/adminapi/captcha_pro?1608801075000" + new Date() * 1;
  },

在vue生命周期created或者mounted中使用定义的中间变量img接收默认的验证码图片，使用字符串拼接时间戳new Date()，页面就会出现一个默认的验证码

<el-form-item prop="imgcode">
        <img :src="img" @click="imgFn" alt="" />
      </el-form-item>

给图片添加点击事件@click

imgFn() {
      this.img =
        "http://bw.gsruiying.com.cn/adminapi/captcha_pro?1608801075000" + new Date() * 1;
    }

把点击事件方法写在vue生命周期methods里面，使用字符串拼接时间戳new Date()，这时点击图片会随机切换验证码的图片