这篇文章将为大家详细讲解有关vue项目中如何实现一个验证码切换功能,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
具体内容如下
& lt; template>
& lt; div类=發ogin"祝辞
& lt; van-field
中心
可清除的
标签=把橹ぢ搿?
占位符=笆淙胙橹ぢ搿?
v模型=皏erify"
比;
# button> & lt;模板;
& lt; vueImgVerify ref=皏erifyRef"/比;
& lt;/template>
& lt;/van-field>
& lt;跨度祝辞点击更换验证码& lt;/span>
& lt; van-button圆块类型=癷nfo"原生类型=皊ubmit"@click=癰tn"比;
提交
& lt;/van-button>
& lt;/div>
& lt;/template>
& lt; script>//ref接受一个内部值并返回一个响应式且可变的裁判对象.ref对象具有指向内部值的单个属性value。
从“进口{,toRefs ref被动};vue";
从“进口vueImgVerify . ./视图/lv.vue";//引入的子组件
从“进口{吐司}vant";
出口默认{
组件:{
vueImgVerify,
},
设置(){
const verifyRef=ref(空);
const状态=活性({
验证:““,
});
const btn=function () {//console.log (verifyRef.value.imgCode);//console.log (state.verify);
如果(verifyRef.value。imgCode===state.verify) {
Toast.success(“验证码输入正确“);
其他}{
Toast.fail(“验证码输入错误“);
}
};
返回{
…toRefs(状态),
btn,
verifyRef,
};
},
};
& lt;/script>
& lt;风格lang=發ess"祝辞& lt;/style>
活性,裁判,toRefs可以去官网查看各代表的含义官网
子组件封装组件,即用即粘贴
