vue添加图形验证码功能

上图看功能，每点击一次切换验证码！前端判断验证码是否输入，后端判断验证码是否正确！

html

<el-form-item label="验证码" prop="code" style="width: 570px">
          <el-input v-model="ruleForm.code" placeholder="请输入验证码" size="small" style="width: 187px;float: left;"></el-input>

          <div class="Verification" @click="clickVerification">
            <img :src="VerificationImg"/>
          </div>
          
</el-form-item>

js

data() {
    return {
        VerificationImg:"",//图形验证码链接
    }

},
methods: {
    //获取验证码
    clickVerification(){
          var num = Math.random();
          this.imgUrls(num)
    },
    imgUrls(num){
          this.VerificationImg="http://farming.wowocode.com:8081/captcha/new?height=40&width=160&font_size=20?"+num
     }
},
mounted() {
   this.imgUrls(0.1)
}



<style>
.Verification{
    width: 160px;
    height: 40px;
    background: #ccc;
    float: left;
    margin-left: 20px;
  }
<style>

思路：

为什么要加一个Math.random()——如果新的图片跟旧的图片地址不一样，效果是会出来的。即：图片有发生改变。 但像”验证码“这种功能。新旧图片的地址是一样的。 鉴于上述情况，怀疑有可能是因为图片地址是一样的，而导致浏览器自动读缓存。所以加一个随机的数字，每次都在变就正常刷新地址了！ 

 

更多技巧请查看vue专栏   https://blog.csdn.net/qq_42221334/column/info/27230/1

来源：CSDN

作者：qq_42221334

链接：https://blog.csdn.net/qq_42221334/article/details/88184605