uni-app学习 form表单（五）

因为有jquery 基本几天就可以上手做项目了 只是一些方法还是不知道怎么用

比如：
input怎么取值
button怎么像jquery那样动态 设置属性

效果图：
input为空不能提交

提交后有个加载的过程

实现思路就是 通过监听 input的值是否为空 来给button动态设置 disabled

1.input取值和赋值
@input=“userNameInput” 实时监听input的变化（类似jquery的proterychange）

直接上代码把 没什么可讲的 只要有思路什么都可以做出来
template

<template>
	<view>
		<cu-custom bgColor="bg-gradual-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">表单</block>
		</cu-custom>
		<!-- <text>
			{{userNameInp}}
		</text> -->
		<view class="cu-form-group">
			<view class="title">账号</view>
			<input type="text" placeholder="请输入账号..." name="userName" 
			@input="userNameInput"
			confirm-type="done" confirm-hold="true"></input>
		</view>
		<view class="cu-form-group">
			<view class="title">密码</view>
			<input type="text" placeholder="请输入密码..." name="passWord" 
			confirm-type="done" confirm-hold="true"></input> 
		</view>
		<view class="padding">
			<button class="cu-btn block bg-blue margin-tb-sm lg" @click="subBtn" type="" :disabled="isAble" >
				<text v-if="loadFlag" class="cuIcon-loading2 cuIconfont-spin"></text>提交
			</button>
		</view>
	</view>
</template>

script

data(){ 
	return{
		userNameInp : '',
		userNameLen : '',
		loadFlag : false,
		isAble : true
	}
},
methods:{
	userNameInput(e){
		// console.log(e);
		this.userNameInp = e.target.value;
		this.userNameLen = e.target.cursor;
		if(this.userNameLen>0){
			this.isAble = false
		}else{
			this.isAble = true
		}
	},
	subBtn(e){
		this.loadFlag = true,
		this.isAble = true
		var $this = this;
		setTimeout(function(){
			// uni.hideLoading()
			uni.showToast({
				title: "提交成功!"
			});
			$this.loadFlag = false
			$this.isAble = false
		},2000)
	}
}