代码模版-vue实现验证码图片刷新操作

登录应用组件中 html 代码

这里是图片验证码，找到图片验证码地方，设置 src，由 js 控制，设置 click 事件，由 js 函数控制

<img :src="checkCodeUrl" class="code-img" @click="changeCheckCode"/>

登录引用组件中 js 代码

点击图片触发 changeCheckCode 函数执行

import ref from "vue"

// checkCodeUrl 是验证码图片 src
const checkCodeUrl = ref("api/checkCode" + "?" + new Date().getTime())

// 点击图片触发验证码 src 更改
const changeCheckCode = () => {
    
    
  checkCodeUrl.value = "api/checkCode" + "?" + new Date().getTime()
}

还有比如说，想要实现登录失败时候验证码图片更换，思路也很简单，就是登录时候判定如果失败就调用下 changeCheckCode 这个函数即可