计算属性computed使用

计算属性:当计算属性内绑定的值改变了,内部set会自动计算改变的值(想当与这里的phoneNo)

当手机号输入超过4位数字即显示获取验证码的按钮,否则禁用

<view class="cu-form-group margin-top  shadow-warp" :class="[shape=='round'?'round':'']">
	<view class="title"><text class="cuIcon-mobile margin-right-xs"></text>手机号:</view>
	<input placeholder="请输入手机号" type="number" maxlength="11" v-model="phoneNo"></input>
</view>
<view class="cu-form-group margin-top shadow-warp" :class="[shape=='round'?'round':'']">
	<view class="title"><text class="cuIcon-lock margin-right-xs"></text>验证码:</view>
	<input class="uni-input" placeholder="请输入验证码" v-model="smsCode"/>
	<view class="action">
		<button class="cu-btn line-blue sm" :disabled="!isSendSMSEnable" @click="onSMSSend"> {{ getSendBtnText }}</button>
	</view>
</view>
<view class="padding text-center margin-top">
	<button class="cu-btn bg-blue lg margin-right shadow" :loading="loading" :class="[shape=='round'?'round':'']"
		@tap="onSMSLogin"><text space="emsp">{{loading ? "登录中...":" 登录 "}}</text>
	</button>
	<button class="cu-btn line-blue lg margin-left shadow" :loading="loading" :class="[shape=='round'?'round':'']"
		@tap="loginWay=1">账户登录
	</button>
</view>
computed: {
		      isSendSMSEnable() {
		        return this.smsCountDown <= 0 && this.phoneNo.length > 4;
		      },
		      getSendBtnText() {
		        if (this.smsCountDown > 0) {
		          return this.smsCountDown + '秒后发送';
		        } else {
		          return '发送验证码';
		        }
		      },
		      canSMSLogin() {
		        return this.userName.length > 4 && this.smsCode.length > 4;
		      },
		      canPwdLogin() {
		        return this.userName.length > 4 && this.password.length > 4;
		      },
		},

在这里插入图片描述

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值