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 = truevar $this = this;setTimeout(function(){// uni.hideLoading()uni.showToast({title: "提交成功!"});$this.loadFlag = false$this.isAble = false},2000)}
}

uni-app学习 form表单（五）相关推荐

H5C3进阶学习——form表单
文章目录 H5 (HTML 5) 简介 H5新增标签语义化标签的兼容性处理 form表单新增的type属性新增的其他属性新增的元素新增的表单事件进度条 H5 (HTML 5) 简介所有的 ...
Django学习--form(表单)
01 表单基础 1.1概念在html中,一个表单的元素是<form>.....</form>,在表单里面允许visitor做输入文本,选择,提交对象等等工作.对于当中< ...
Django(part46)--form表单验证
学习笔记,仅供参考文章目录 form表单验证举个例子 form表单验证 form提供表单和字段验证,我们可以使用form.is_valid() 方法进行表单验证,若该方法返回值为True,则表示当 ...
学习日志day45（2021-09-09）（1、有道翻译API使用json格式数据 2、JSONP 3、Ajax提交form表单 4、Web Uploader）
学习内容:学习JavaWeb(Day45) 1.有道翻译API使用json格式数据 2.JSONP 3.Ajax提交form表单 4.Web Uploader 1.有道翻译API使用json格式数据 ...
layui快速学习（一）form表单元素
form表单元素包括:text 文本输入框,password密码输入框,checkbox复选框,radio单选框,file 文件域,submit表单提交action指向的文件,reset表单清空,im ...
1月26日学习内容整理：reverse函数补充，modelform对象补充，form表单参数补充
1.reverse函数中的args参数,必须是一个元组,只有一个元素时必须加逗号,并且args给URL传参数的时候是根据分组传的,所以我们设置的URL中的要传参的正则表达式一定要加括号 2.我们用未绑 ...
django ajax form表单,Django学习系列之Form表单和ajax(示例代码)
昵称: 生日: 性别: 男女地址: 手机号: 邮箱: [修改] {% csrf_token %}$(\'#js ...
前端学习笔记--AJAX的应用（三）form表单改为AJAX提交
无意中发现了一个巨牛的人工智能教程,忍不住分享一下给大家.教程不仅是零基础,通俗易懂,而且非常风趣幽默,像看小说一样!觉得太牛了,所以分享给大家.点这里可以跳转到教程. 参考博客:http://ww ...
java学习之服务器第26天( --form表单-- 四大域对象--cookie)
你想要多大的成功, 你愿意为这份成功付出什么? 1.form表单定义: 相当于一个控件集合,里面包含多个控件,点"提交"后会把表单中的所有控件的值都传给action到的页面: 通 ...

uni-app学习 form表单（五）

uni-app学习 form表单（五）相关推荐

最新文章

热门文章