databinding - vue.js如何数据监听,为什么不推荐使用watch?
本文介绍了databinding - vue.js如何数据监听,为什么不推荐使用watch?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
问 题
问题描述2017.04.15
监听手机号的数据模型变化，如果输入是合法的手机号，则放开获取验证码按钮
因为之前我用过AngularJS，所以理所应当的找VueJS中有没有
watch方法，但同事和我说不推荐使用watch。又该如何实现这一监听工作呢？
<template>
<div class="login login-background">
<div class="login-panel">
{{codeBtnActive}}
{{loginBtnActive}}
<div class="item">
<label>手机号</label>
<input type="tel" placeholder="请输入手机号" maxlength="11" v-model="phone"/>
<div class="separator">
<a href="javascript:void(0);"
:class="{'disabled':!codeBtnActive}"
:disabled="!codeBtnActive"
v-model="codeTxt"
@click="getSMSCode">{{codeTxt}}</a>
</div>
</div>
<div class="item">
<label>验证码</label>
<input type="number" placeholder="请输入验证码" maxlength="4" v-model="code"/>
</div>
<button :class="{'active':loginBtnActive}" :disabled="!loginBtnActive">登 录</button>
<span>登录后默认同意<a href="javascript:void(0);">《护理易用户协议》</a></span>
</div>
</div>
</template>
<script>
/**
* Login.vue组件对象
*/
export default {
name: 'login',
components: {},
data () {
return {
loginBtnActive: false, //登录按钮是否可用
codeBtnActive : false, //获取验证码按钮是否可用
phone : "", //手机号码
code : "", //手机验证码
count : 60, //验证码倒计时
codeTxt : "获取验证码", //验证码按钮文字
GETSMSCODE_URL : '/json/GetSMSCode', //获取验证码URL
USER_LOGIN_URL : '/json/Login', //登录URL
}
},
computed : {
codeBtnActive : function(){
if(this.test(this.phone)){
return true;
}else{
return false;
}
},
loginBtnActive : function(){
if((this.codeBtnActive) && (this.test(this.code))){
return true;
}else{
return false;
}
}
},
methods: {
//执行登录
'goLogin' : function(){
var self = this;
//请求参数
var params = {
'phone' : this.phone,
'code' : this.code,
'source': 0
};
//发送请求
this.$http.post(this.GETSMSCODE_URL,params).then(function(response){
// console.info(JSON.stringify(response));
if(response.errorCode == 0) {
self.setCookie(response.sid);
this.$router.push('/index');
}else{
self.loginBtnActive = true;
}
});
},
//请求获取验证码
'getSMSCode' : function(){
if(this.codeBtnActive){
var self = this;
//请求参数
var params = {
'phone' : this.phone,
'purpose' : 'Login',
'source' : 0
};
//发送请求
this.$http.post(this.GETSMSCODE_URL,params).then(function(response){
// console.info(JSON.stringify(response));
if(response.errorCode == 0) {
self.startTicktock();
} else {
}
});
}
},
//获取验证码倒计时
'startTicktock' : function(){
var self = this;
self.codeBtnActive = false;
var ticktock = setInterval(function() {
var str = "剩" + (self.count -= 1) + "秒";
self.codeTxt = str;
if(self.count == 0) {
clearInterval(ticktock);
}
}, 1000);
self.count = 60;
self.codeTxt = "获取验证码";
},
//执行验证
'test' : function(value,type){
console.info('test come in');
var phoneReg = /^1[34578]\d{9}$/;//手机号校验正则
var codeReg = /^[\d|\D]{4,}$/; //验证码及密码验证正则
if("phone" == type){
return (phoneReg.test(value) && value != undefined)?true:false;
}else{
return (codeReg.test(value) && value != undefined)?true:false;
}
},
//设置Cookie
'setCookie' : function(){
var urlparam = window.location.search;
var sid = "";
if(urlparam.indexOf("sid") > 0){
sid = urlparam.substring(urlparam.indexOf("sid")+4,urlparam.length);
}
document.cookie = "sid=" + sid;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function px2rem($px){
$rem : 75px;
@return ($px/$rem) + rem;
}
$theme-color:#2BD6BD;
$gradient:(to right, #14cbc9 0%,#18d9bc 40%,#3addb0 100%);
.login{
height: auto;
width: auto;
padding: px2rem(715px) px2rem(30px) 0 px2rem(30px);
.item:first-child{
margin-bottom: px2rem(36px);
}
.login-panel{
min-height: 200px;
width: 100%;
.item{
display: table;
border-bottom: 1px solid #ccc;
width: 100%;
min-height: px2rem(61px);
font-size: px2rem(30px);
color: #666;
text-align: left;
label,input,div{
height: px2rem(30px);
line-height: px2rem(30px);
display: table-cell;
}
label{
width: px2rem(130px);
}
input{
background: transparent;
border: none;
font-size: px2rem(28px);
width: px2rem((130px + 192px));
&::-webkit-input-placeholder{
color: #CCCCCC;
font-size: px2rem(30px);
}
}
div.separator{
height: px2rem(40px);
width: px2rem(147px + 40px + 30px);
a{
border-left: 1px solid #ccc;
padding-left: px2rem(30px);
font-size: px2rem(30px);
color: $theme-color;
}
a.disabled {
color: #CCCCCC;
}
}
}
button{
background-color: #999;
width: 100%;
height: px2rem(83px);
margin-top: px2rem(99px);
border-radius: px2rem(10px);
border: none;
color: #FFFFFF;
font-size: px2rem(30px);
}
button.active{
background: linear-gradient($gradient);
}
span{
display: block;
margin-top: px2rem(34px);
font-size: px2rem(23px);
color: #999;
a{
color: $theme-color;
}
}
}
}
.login-background{
background-image: url(../../../mobile/src/assets/login-bg.png);
background-repeat: no-repeat;
background-size: 100%;
background-position-y: -1.5px;
}
</style>
问题描述2017.04.17
有很多朋友回复推荐使用
computed属性计算来监听处理，但我改成这样之后，都没有进入this.test()方法了。能否再帮忙看看是哪里不对？
解决方案
<template>
<div class="login login-background">
<div class="login-panel">
{{codeBtnActive}}
{{loginBtnActive}}
<div class="item">
<label>手机号</label>
<input type="tel" placeholder="请输入手机号" maxlength="11" v-model="phone"/>
<div class="separator">
<a href="javascript:void(0);"
:class="{'disabled':!codeBtnActive}"
:disabled="!codeBtnActive"
v-model="codeTxt"
@click="getSMSCode">{{codeTxt}}</a>
</div>
</div>
<div class="item">
<label>验证码</label>
<input type="number" placeholder="请输入验证码" maxlength="4" v-model="code"/>
</div>
<button :class="{'active':loginBtnActive}" :disabled="!loginBtnActive">登 录</button>
<span>登录后默认同意<a href="javascript:void(0);">《***用户协议》</a></span>
</div>
</div>
</template>
<script>
/**
* Login.vue组件对象
*/
export default {
name: 'login',
components: {},
data () {
return {
loginBtnActive: false, //登录按钮是否可用
codeBtnActive : false, //获取验证码按钮是否可用
phone : "", //手机号码
code : "", //手机验证码
count : 60, //验证码倒计时
codeTxt : "获取验证码", //验证码按钮文字
GETSMSCODE_URL : '/json/GetSMSCode', //获取验证码URL
USER_LOGIN_URL : '/json/Login', //登录URL
}
},
computed : {
codeBtnActive : function(){
if(this.test(this.phone)){
return true;
}else{
return false;
}
},
loginBtnActive : function(){
if((this.codeBtnActive) && (this.test(this.code))){
return true;
}else{
return false;
}
}
},
methods: {
//执行登录
'goLogin' : function(){
var self = this;
//请求参数
var params = {
'phone' : this.phone,
'code' : this.code,
'source': 0
};
//发送请求
this.$http.post(this.GETSMSCODE_URL,params).then(function(response){
// console.info(JSON.stringify(response));
if(response.errorCode == 0) {
self.setCookie(response.sid);
this.$router.push('/index');
}else{
self.loginBtnActive = true;
}
});
},
//请求获取验证码
'getSMSCode' : function(){
if(this.codeBtnActive){
var self = this;
//请求参数
var params = {
'phone' : this.phone,
'purpose' : 'Login',
'source' : 0
};
//发送请求
this.$http.post(this.GETSMSCODE_URL,params).then(function(response){
// console.info(JSON.stringify(response));
if(response.errorCode == 0) {
self.startTicktock();
} else {
}
});
}
},
//获取验证码倒计时
'startTicktock' : function(){
var self = this;
self.codeBtnActive = false;
var ticktock = setInterval(function() {
var str = "剩" + (self.count -= 1) + "秒";
self.codeTxt = str;
if(self.count == 0) {
clearInterval(ticktock);
}
}, 1000);
self.count = 60;
self.codeTxt = "获取验证码";
},
//执行验证
'test' : function(value,type){
console.info('test come in');
var phoneReg = /^1[34578]\d{9}$/;//手机号校验正则
var codeReg = /^[\d|\D]{4,}$/; //验证码及密码验证正则
if("phone" == type){
return (phoneReg.test(value) && value != undefined)?true:false;
}else{
return (codeReg.test(value) && value != undefined)?true:false;
}
},
//设置Cookie
'setCookie' : function(){
var urlparam = window.location.search;
var sid = "";
if(urlparam.indexOf("sid") > 0){
sid = urlparam.substring(urlparam.indexOf("sid")+4,urlparam.length);
}
document.cookie = "sid=" + sid;
}
}
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
@function px2rem($px){
$rem : 75px;
@return ($px/$rem) + rem;
}
$theme-color:#2BD6BD;
$gradient:(to right, #14cbc9 0%,#18d9bc 40%,#3addb0 100%);
.login{
height: auto;
width: auto;
padding: px2rem(715px) px2rem(30px) 0 px2rem(30px);
.item:first-child{
margin-bottom: px2rem(36px);
}
.login-panel{
min-height: 200px;
width: 100%;
.item{
display: table;
border-bottom: 1px solid #ccc;
width: 100%;
min-height: px2rem(61px);
font-size: px2rem(30px);
color: #666;
text-align: left;
label,input,div{
height: px2rem(30px);
line-height: px2rem(30px);
display: table-cell;
}
label{
width: px2rem(130px);
}
input{
background: transparent;
border: none;
font-size: px2rem(28px);
width: px2rem((130px + 192px));
&::-webkit-input-placeholder{
color: #CCCCCC;
font-size: px2rem(30px);
}
}
div.separator{
height: px2rem(40px);
width: px2rem(147px + 40px + 30px);
a{
border-left: 1px solid #ccc;
padding-left: px2rem(30px);
font-size: px2rem(30px);
color: $theme-color;
}
a.disabled {
color: #CCCCCC;
}
}
}
button{
background-color: #999;
width: 100%;
height: px2rem(83px);
margin-top: px2rem(99px);
border-radius: px2rem(10px);
border: none;
color: #FFFFFF;
font-size: px2rem(30px);
}
button.active{
background: linear-gradient($gradient);
}
span{
display: block;
margin-top: px2rem(34px);
font-size: px2rem(23px);
color: #999;
a{
color: $theme-color;
}
}
}
}
.login-background{
background-image: url(../../../mobile/src/assets/login-bg.png);
background-repeat: no-repeat;
background-size: 100%;
background-position-y: -1.5px;
}
</style>改成用computed后，输入有机会却没进入到this.test()方法中？
这篇关于databinding - vue.js如何数据监听,为什么不推荐使用watch?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
