vue.js最适合的表单提交涉及各种插件[推荐]

基于vue.js，这里写了一个小专栏；涉及vue.js动态添加css样式、tab切换、触控、表单提交、验证、toast、数据双向绑定等。

首先展示效果图，然后逐一解释：

首先，首先要使用的是动态修改css

点击x将隐藏温馨提示：

1.第一个绑定v-绑定到整个div

div class=' rz-note ' v-bind : style=' { display : is no } ' pbbusiness cards用于识别相关人员。提示：img src=' http 3360./assets/static/img-icon/LAN _ cha . png ' @ click='隐藏词

div class=' rz-note ' v-bind : style=' { display : is no } ' pbbusiness cards用于识别相关人员。提示：img src=' http 3360./assets/static/imgicon/LAN _ cha . png ' @ click=' hidden words '/。

isno:'block '，

3.编写点击事件方法

方法： {隐藏单词(){这个。isno=' none'}，}只需单击一下即可将样式设置为none并编写它。

根据您的业务需求动态编写您添加的样式；方法都一样。

其次，以下是提交时最常见的验证

我根据自己的主题颜色修改了吐司风格

吐司介绍从“vant”导入{吐司}

2.1这涉及到v模式数据的双向绑定

div class=' my-content-list ' div class=' color-black ' span style=' margin-right : 0.6 rem；真实姓名：/span输入v-model='您的姓名'占位符='请输入您的真实姓名'/div/div class=' my-content-list ' div class=' color-black ' span style=' margin-right : 0 0.6 rem；手机号码：/span输入v-model='您的电话'占位符='请输入您的手机号码'/div/div class=' yzbtn ' @单击=' submitbtn '立即验证/div2.2在数据中定义您的姓名和电话的初始值

你的名字： ' '，你的手机： ' '，2.3写作方法z。

submit BTN(){ var reg=/^1[3|4|5|8][0-9]\d{4,8}$/；如果(这个。你的名字==' '){吐司('请填写真实姓名')；返回；}如果(这个。你的手机=='' | |这个。yourphone==null) {toast('请填写您的手机号码')；返回；} if(！Reg。测试(这个。您的电话)){toast('手机号码格式不正确')；返回；}}，上传图片和预览图片将在下一篇文章中提到。一些小栏目和插件方法每周都会更新

最后，附上整个代码

欢迎大家提出宝贵意见，共同进步

模板' div class='任政div class=' rz-note ' v-bind : style=' { display :为no } ' p名片用来鉴别是相关人员，温馨提示：img src='http:/资产/静态/img-icon/LAN _ cha。png ' @ click='隐藏单词'/p/div van-tab v-model=' active '可切换van-tab v-for='(项目，索引)在nav RR ' : title='项目。name ' class=' v-tab ' div v-if=' index=' 0 ' div class=' color-black ' style=' text-align 3360 center；保证金-顶： 0.4雷姆；'请上传本人名片照片/div class=' rz-picter ' img src=' http :/资产/贾。jpg/' pinput type=' file ' style=' display : none；'上传图片/p/div class=' cuxian '/div！-作者：[emailprotected]时间：2018-08-24 描述：表单表单-div class=' my-content-list ' div class=' color-black ' span style=' margin-right : 0.6 rem；'真实姓名：/span put v-model=' yoursname '占位符='请输入您的真实姓名//div/div class=' my-content-list ' div class=' color-black ' span style=' margin-right : 0.6 rem；'手机号码：/span put v-model=' yoursphone '占位符='请输入您的手机号码//div/div class=' yzbtn ' @点击='提交btn '立即认证/div/div v-if=' index==1 ' div class=' color-black ' style=' text-align : center；保证金-顶： 0.4雷姆；'请上传本人身份证照片/div class=' rz-picter ' img src=' http :/assets/jia.jpg'/p上传人像页/p/div div class=' rz-picter ' img src=' http :/assets/jia.jpg'/p上传国辉页/p/div class=' cuxian '/div class=' my-content-list ' div class=' color-black ' span style=' margin-right : 0.6 rem；'真实姓名：/span put占位符='请输入您的真实姓名//div/div class=' my-content-list ' div class=' color-black ' span style=' margin-right : 0.6 rem；'手机号码：/span放入类型=' number '占位符='请输入您的手机号码//div/div class=' yzbtn '立即认证/div/div/van-Tab/van-Tab/div/模板脚本从“万特”导入{制表符，制表符}；从“万特”导入{吐司}导出默认{ name : }任政，data() { return { yoursname: ' '，yoursphone: ' '，isno:'block '，active : 0 0，navArr: [{ name: '身份认证}，{ name: '实名认证} ]，} }，方法： {隐藏单词(){ this。isno=' none ' }，提交BTN(){ var reg=/^1[3|4|5|8][0-9]\d{4,8}$/；if(this.yoursname=='') { Toast('请填写你的真实姓名');返回；}如果(这个。yoursphone==' ' | |这个。yoursphone==null){ Toast('请填写你的手机号码');返回；} if(！reg。测试(这个。你的电话){吐司('手机号码格式不正确');返回；} }，} }/scriptstyle .rz-note { padd : 0.2 rem 0.3 rem；display : flex flex-方向：行；正义-内容：空格；align-items:居中；背景# F0F5FBcolor: # 28D9EF}。rz-注意img { height: 0.22rem宽度： 0.22毫米；} .rz-picter {高度： 3re m；宽度： 6雷姆；余量： 0.3微米自动订购： 0.01微米实体# edededddisplay : flex flex-direction :柱；align-items:居中；正义-内容：中心；} /*立即验证*/.yz BTN {宽度： 90%；高度： 0.8雷姆；背景# ff 6600 border-半径：0.06 rem；余量： 30px自动；文本对齐：中心；线高： 0.8雷姆；color: #FFFFFF } /*修改原有标签样式*/.van-tab { color: #A3A3A3！重要；} .van-tab - active { color: #000！重要；} .van-tab _ _ line {底色： # FF6600！重要；宽度： 0.7雷姆！重要；文本-对齐：中心！重要；align-items:居中；左边距： 1.5雷姆；} .van-toast {底色： # FF6600color: #FFFFFF } .我的内容列表{ padd : 0.3 remdisplay : flex flex-direction : row；正义-内容：空格；边框-底部： 0.01毫米实心# EDEDEDED }/样式总结

以上是边肖介绍的vue.js最适合的表单提交，涉及到很多插件。希望对大家有帮助。如果你有任何问题，请给我留言，边肖会及时回复你。非常感谢您对我们网站的支持！