本文实例讲述了组件简单验证码功能。分享给大家供大家参考，具体如下：

！DOCTYPE html html head meta charset=' UTF-8 '/head body div id=' app '！-验证码输入框-输入类型=' text ' v-model=' AAA ' @ blur=' CheckNum '/！-验证码切换按钮-输入类型=' button ' v-model=' BBB ' @ click=' create code '/！-提示信息-span type=' text ' style=' color : red；'{{ ccc }}/span /div/body！-在元素之前导入Vue-脚本src=' http :3359 cdn。bootscs。com/Vue/2。4 .4/Vue。量滴js /脚本新Vue({ el: '#app '，data : function(){ return { AAA : ' '，bbb: ' '，ccc: '提示信息} }，创建了(){ this。创建代码()；//初始化生成一个四位数的验证码}，方法： { create code(){ var code=' '；var codeLength=4；//验证码的长度var random=新数组(0，1，2，3，4，5，6，7，8，9，' A '，' B '，' C '，' D '，' E '，' F '，' G '，' H '，' I '，' J '，' K '，' L '，' M '，' N '，' O '，' P '，' Q '，' R '，' S '，' T '，' U '，' V '，' W '，' X '，' Y '，' Y '//随机数for(var I=0；我代码长度；i ) { //循环操作定义变量指数=数学。地板(数学。random()* 36)；//取得随机数的索引(0~35)代码=随机[索引]；//根据索引取得随机数加到密码上} this.bbb=code//把密码值赋给验证码}，CheckNum(){ var num=this。AAA。touppercase()；//输入内容全部转化为大写if(num==this.bbb){ this.ccc='验证码正确；}else{ this.ccc='验证码错误；这个。创建代码()；} } } })/脚本/html使用在线HTML/CSS/JavaScript代码运行工具：http://工具。JB 51。net/code/HTMljsrun运行上述代码，可得到如下运行结果：

希望本文所述对大家vue.js程序设计有所帮助。