最适应的vue.js的form提交涉及多种插件【推荐】       这篇文章主要介绍了最适应的vue.js的form提交涉及多种插件,涉及到 vue.js动态添加css样式 ，tab切换 ，touch，表单提交，验证，toast，数据双向绑定等。需要的朋友可以参考下

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

先上效果图再一一讲解：

一、首先用到的是动态修改css

点击X将隐藏温馨提示：

1.先给整个div绑定 v-bind

 div v-bind: 
 p 名片用来鉴别是相关人员，温馨提示： img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords" /p 
 /div 

注释：图片地址为你自己的地址

 div v-bind: 
 p 名片用来鉴别是相关人员，温馨提示：
 img src="../assets/static/imgicon/lan_cha.png" @click="hiddenwords" /p 
 /div 

2.在data里定义

isno:'block',:

3.写click事件方法

methods: {
 hiddenwords() {
 this.isno = 'none'
}

一个简单的点击设置样式为none便写好了。

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

二、下面写提交时最常见验证

Toast样式 我根据自己的主题色进行了修改

Toast引入import { Toast } from 'vant'

2.1 这里涉及到了v-modal 数据双向绑定

 div 
 div span 
 真实姓名: /span input v-model="yoursname" placeholder="请输入您的真实姓名" / /div 
 /div 
 div 
 div span 手机号码: /span 
 input v-model="yoursphone" placeholder="请输入您的手机号码" / /div 
 /div 
 div @click="submitBtn" 立即认证 /div 

2.2在data定义 yoursname和yoursphone的初始值

yoursname: ' ',
 yoursphone: ' ',

2.3写方法z

submitBtn() {
 var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
 if(this.yoursname == '') {
 Toast("请填写你的真实姓名");
 return;
 if(this.yoursphone == '' || this.yoursphone == null) {
 Toast("请填写你的手机号码");
 return;
 if(!reg.test(this.yoursphone)) {
 Toast('手机号码格式不正确');
 return;
},

图片上传以及预览图片将在