Vue.js（读音 /vjuː/,类似于 view）是一个构建数据驱动的 web 界面的库。Vue.js 的目标是通过尽可能简单的 API 实现响应的数据绑定和组合的视图组件。
Vue.js 自身不是一个全能框架——它只聚焦于视图层。因此它非常容易学习，非常容易与其它库或已有项目整合。另一方面，在与相关工具和支持库一起使用时，Vue.js 也能完美地驱动复杂的单页应用。
摘要:
1、该组件基于Vue 2.1.X版本；
1、 Vue 组件代码如下：
',props: {
second: {
type: Number,default: 60
},disabled: {
type: Boolean,default: false
}
},data:function () {
return {
time: 0
}
},methods: {
run: function () {
this.$emit('run');
},start: function(){
this.time = this.second;
this.timer();
},stop: function(){
this.time = 0;
this.disabled = false;
},setDisabled: function(val){
this.disabled = val;
},timer: function () {
if (this.time > 0) {
this.time--;
setTimeout(this.timer,1000);
}else{
this.disabled = false;
}
}
},computed: {
text: function () {
return this.time > 0 ? this.time + 's 后重获取' : '获取验证码';
}
}
});
2、使用方式：
disabled 建议不要绑定，我们可以通过调用组件的setDisabled方法来切换按钮可用状态；
second 初始值60s 没特别值可以不绑定；
所以我们可以在HTML页面这样：
JS这样：
以上所述是小编给大家介绍的Vue 短信验证码组件开发详解。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/vue/41717.html