Vue -- 验证码

<template>
<div>
<p>随机生成验证码:</p>
<p>{{yzm}}</p>
<input type="text" v-model="inp" />
<button @click="getCode">看不清换一个</button>
<button @click="checkCode" @keyup.enter="checkCode">验证</button>
<span>{{jg}}</span>
</div>
</template>
<script>
export default {
data(){
return{
yzm:'1234',
inp:'',
jg:''
}
},
mounted(){
this.getCode()
},
methods:{
getCode(){
const 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', 'Z']
let code = ''
for(let i=0;i<4;i++){
let index = Math.floor(Math.random()*36)
code = code + random[index]
}
this.yzm = code
},
checkCode(){
this.inp = this.inp.toUpperCase()
if(this.inp == this.yzm){
this.jg = true
}else{
this.jg = false
}
}
}
}
</script>
<style scoped>

</style>