基于vue。js这里写了一个小列子;涉及到vue。js动态添加css样式,选项卡切换,触摸,表单提交,验证,吐司,数据双向绑定等。
先上效果图再一一讲解:
& lt; div类=" rz-notice " v-bind:比;
& lt; p>名片用来鉴别是相关人员,温馨提示:& lt; img src=" https://www.yisu.com/assets/static/img-icon/lan_cha.png " @click=癶iddenwords祝辞& lt;/p>
& lt;/div>
注释:图片地址为你自己的地址
& lt; div类=" rz-notice " v-bind:比;
& lt; p>名片用来鉴别是相关人员,温馨提示:
& lt; img src=" https://www.yisu.com/assets/static/imgicon/lan_cha.png " @click=癶iddenwords祝辞& lt;/p>
& lt;/div>
2。在数据里定义
<代码>欲:“块”,:
3。写点事件方法
方法:{
hiddenwords () {
这一点。欲='没有'
}，
}
一个简单的点击设置样式为没有便写好了。
根据你的业务需求写你动态添加的样式;方法都是一样的。
吐司样式我根据自己的主题色进行了修改
<代码>吐司引入从“vant”进口{吐司}
2.1这里涉及到了v-modal数据双向绑定
& lt; div类=癿y-content-list”比;
& lt; div类="黑色"祝辞& lt;跨度比;
真实姓名:& lt;/span> & lt;输入v模型=皔oursname”占位符=扒胧淙肽恼媸敌彰?祝辞& lt;/div>
& lt;/div>
& lt; div类=癿y-content-list”比;
& lt; div类="黑色"祝辞& lt;跨度祝辞手机号码:& lt;/span>
& lt;输入v模型=皔oursphone”占位符=扒胧淙肽氖只怕搿?祝辞& lt;/div>
& lt;/div>
& lt; div类=皔zbtn @click”=皊ubmitBtn”祝辞立即认证& lt;/div>
2.2在数据定义yoursname和yoursphone的初始值
yoursname: ' ',
yoursphone:“
2.3写方法z
submitBtn () {
var reg=/^ 1 [3 | 4 | 5 | 8] [0 - 9] \ d {4 8} $/;
如果这一点。yoursname==? {
烤面包(“请填写你的真实姓名”);
返回;
}
如果这一点。yoursphone==" | |。yoursphone==null) {
烤面包(“请填写你的手机号码”);
返回;
}
如果(! reg.test (this.yoursphone)) {
烤面包(“手机号码格式不正确的);
返回;
}
},
图片上传以及预览图片将在下一篇文章中讲到每周都会更新一些小列子以及插件方法
最后附上整个代码
欢迎提出你宝贵的意见一同进步& # 8203;
& lt; template>
& lt; div类=皉enzheng”比;
& lt; div类=" rz-notice " v-bind:比;
& lt; p>名片用来鉴别是相关人员,温馨提示:& lt; img src=" https://www.yisu.com/assets/static/img-icon/lan_cha.png " @click=癶iddenwords祝辞& lt;/p>
& lt;/div>
& lt; van-tabs v模型=盎钤尽眘wipeable>
& lt; van-tab v="(项目、索引)navArr”: title=癷tem.name”class=皏-tab”比;
& lt; div v=爸甘?=0”比;
& lt; div类="黑色"祝辞请上传本人名片照片& lt;/div>
& lt; div类=皉z-picter”比;
& lt; img src=" https://www.yisu.com/assets/jia.jpg "/比;
& lt; p> & lt;输入类型=拔募痹谏洗计? lt;/p>
& lt;/div>
& lt; div类=" cuxian "祝辞& lt;/div>
& lt; !
1150801771 @qq.com
时间:2018-08-24
描述:形式表单
——比;
& lt; div类=癿y-content-list”比;
& lt; div类="黑色"祝辞& lt;跨度祝辞真实姓名:& lt;/span> & lt;输入v模型=皔oursname”占位符=扒胧淙肽恼媸敌彰?祝辞& lt;/div>
& lt;/div>
& lt; div类=癿y-content-list”比;
& lt; div类="黑色"祝辞& lt;跨度祝辞手机号码:& lt;/span> & lt;输入v模型=皔oursphone”占位符=扒胧淙肽氖只怕搿?祝辞& lt;/div>
& lt;/div>
& lt; div类=" yzbtn " @click=皊ubmitBtn”比;
立即认证
& lt;/div>
& lt;/div>
& lt; div v=爸甘?=1”比;
& lt; div类="黑色"祝辞请上传本人身份证照片& lt;/div>
& lt; div类=皉z-picter”比;
& lt; img src=" https://www.yisu.com/assets/jia.jpg "/比;
& lt; p>上传人像页& lt;/p>
& lt;/div>
& lt; div类=皉z-picter”比;
& lt; img src=" https://www.yisu.com/assets/jia.jpg "/比;
& lt; p>上传国辉页& lt;/p>
& lt;/div>
& lt; div类=" cuxian "祝辞& lt;/div>
& lt; div类=癿y-content-list”比;
& lt; div类="黑色"祝辞& lt;跨度祝辞真实姓名:& lt;/span> & lt;输入占位符=扒胧淙肽恼媸敌彰?祝辞& lt;/div>
& lt;/div>
& lt; div类=癿y-content-list”比;
& lt; div类="黑色"祝辞& lt;跨度祝辞手机号码:& lt;/span> & lt;输入类型=笆俊闭嘉环?扒胧淙肽氖只怕搿?祝辞& lt;/div>
& lt;/div>
& lt; div类=皔zbtn”比;
立即认证
& lt;/div>
& lt;/div>
& lt;/van-tab>
& lt;/van-tabs>
& lt;/div>
& lt;/template>
& lt; script>
从“vant”进口{标签,标签};
从“vant”进口{吐司}
出口默认{
名称:“renzheng”,
数据(){
返回{
yoursname:”,
yoursphone:”,
欲:“块”,
活动:0,
navArr: [{
名称:“身份认证”
}，
{
名称:“实名认证”
}
),
}
}，
方法:{
hiddenwords () {
这一点。欲='没有'
}，
submitBtn () {
var reg=/^ 1 [3 | 4 | 5 | 8] [0 - 9] \ d {4 8} $/;
如果这一点。yoursname==? {
烤面包(“请填写你的真实姓名”);
返回;
}
如果这一点。yoursphone==" | |。yoursphone==null) {
烤面包(“请填写你的手机号码”);
返回;
}
如果(! reg.test (this.yoursphone)) {
烤面包(“手机号码格式不正确的);
返回;
}
}，
}
}
& lt;/script>
& lt; style>
.rz-notice {
填充:0.2雷姆0.3快速眼动;
显示:flex;
flex-direction:行;
justify-content:之间的空间;
对齐项目:中心;
背景:# F0F5FB;
颜色:# 28 d9ef;
}
.rz-notice img {
高度:0.22快速眼动;
宽度:0.22快速眼动;
}
.rz-picter {
高度:3快速眼动;
宽度:6眼动;
利润:0.3雷姆汽车;
边界:0.01雷姆固体# ededed;
显示:flex;
flex-direction:列;
对齐项目:中心;
justify-content:中心;
}/*立即验证*/.yzbtn {
宽度:90%;
高度:0.8快速眼动;
背景:# FF6600;
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
