东莞网站建设 熊掌号,做网站静态和动态,网站视频主持人怎么做,网页设计报价多少收集表单数据
收集表单数据#xff1a;
若#xff1a;input typetext/,则v-model收集的是value值#xff0c;用户输入的就是value值若#xff1a;input typeradio/,则v-model收集的是value值#xff0c;且要给标签配置value值若…收集表单数据
收集表单数据
若input typetext/,则v-model收集的是value值用户输入的就是value值若input typeradio/,则v-model收集的是value值且要给标签配置value值若: input typecheckbox/ 1.没有配置input的value属性那么收集的就是checked勾选or未勾选是布尔值 2.配置input的value属性v-model的初始值是非数组那么收集的就是checked(勾选or未勾选是布尔值)v-model的初始值是数组那么收集的就是value组成的数组 备注v-model的三个修饰符 lazy:失去交单再收集数据number:输入字符因此转未有效的数字trim:输入首尾空格过滤 div idrootform submit.preventdemo账号input typetext v-model.trimuserinfo.account br/br/密码input typepassword v-modeluserinfo.passwordbr/ br/年龄input typenumber v-model.numberuserinfo.age br/br/性别男input typeradio namesex v-modeluserinfo.sex valuemale女input typeradio namesex v-modeluserinfo.sex valuefemalebr/ br/爱好学习input typecheckbox v-modeluserinfo.hobby valuestudy打游戏input typecheckbox v-modeluserinfo.hobby valuegame吃饭input typecheckbox v-modeluserinfo.hobby valueeatbr/ br/所属校区select v-modeluserinfo.cityoption value请选择校区/optionoption valuebeijing北京/optionoption valueshanghai上海/optionoption valueshenzhen深圳/optionoption valuewuhan武汉/option/selectbr/ br/其他信息textarea v-modeluserinfo.other/textareabr/ br/input typecheckbox v-modeluserinfo.agree阅读并接受a hrefhttp://atguigu.com用户协议/abutton提交/button/form/divscript typetext/javascriptVue.config.productionTip false 阻止Vue启动时生成提示//创建Vue实列const vmnew Vue({el:#root, data: {userinfo:{account:,password:,age:18,sex:female,hobby:[],city:beijing,other:,agree:}},methods:{demo(){console.log(JSON.stringify(this.userinfo))}}});/script过滤器(Vue3 已移除)
过滤器 定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理。 语法
注册过滤器Vue.filter(name,callback) 或 new Vue{filters:{}}使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 “xxx | 过滤器名” 备注过滤器也可以接收额外参数、多个过滤器也可以串联并没有改变原本的数据, 是产生新的对应的数据
!-- 准备好一个容器--div idrooth2显示格式化后的时间/h2!-- 计算属性实现 --h3现在是{{fmtTime}}/h3!-- methods实现 --h3现在是{{getFmtTime()}}/h3!-- 过滤器实现 --h3现在是{{time | timeFormater}}/h3!-- 过滤器实现传参 --h3现在是{{time | timeFormater(YYYY_MM_DD) | mySlice}}/h3h3 :xmsg | mySlice尚硅谷/h3/divdiv idroot2h2{{msg | mySlice}}/h2/div/bodyscript typetext/javascriptVue.config.productionTip false//全局过滤器Vue.filter(mySlice,function(value){return value.slice(0,4)})new Vue({el:#root,data:{time:1621561377603, //时间戳msg:你好尚硅谷},computed: {fmtTime(){return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss)}},methods: {getFmtTime(){return dayjs(this.time).format(YYYY年MM月DD日 HH:mm:ss)}},//局部过滤器filters:{timeFormater(value,strYYYY年MM月DD日 HH:mm:ss){// console.log(,value)return dayjs(value).format(str)}}})new Vue({el:#root2,data:{msg:hello,atguigu!}})/script
