本文实例为大家分享了VUE实现图片验证码的具体代码，供大家参考，具体内容如下

1. 概述

1.1 说明

在开发过程中，有时候需要使用图片验证码进行增加安全强度，在点击图片时更新新的图片验证码，记录此功能，以便后期使用。

2. 示例

2.1 vue示例代码

<template> <el-form style="width: 400px;"> <el-form-item style="height: 40px;margin-bottom: 20px;"> <el-input class="input" maxlength="8" placeholder="请输入验证码"></el-input> <div class="divIdentifyingCode" @click="getIdentifyingCode(true)"> <img id="imgIdentifyingCode" style="height:40px; width: 100px; cursor: pointer;" alt="点击更换" title="点击更换" /> </div> </el-form-item> </el-form></template><script>export default { methods: { /** * 窗口代码 * @param {Boolean} bRefresh 是否刷新 */ getIdentifyingCode: function (bRefresh) { let identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode"; if (bRefresh) { identifyCodeSrc = "https://www.xxx.xxx.xxx/imgCode?" + Math.random(); } let objs = document.getElementById("imgIdentifyingCode"); objs.src = identifyCodeSrc; }, }}</script><style> .divIdentifyingCode { position: absolute; top: 0; right: 0; z-index: 5; width: 102px; height: 40px; background: #e2e2e2; margin: 0; }</style>

注意：使用 Math.random() 来获取新的验证码，后台支持使用接口获取验证码。

2.2 显示

关于vue.js的学习教程，请大家点击专题vue.js组件学习教程、Vue.js前端组件学习教程进行学习。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。