公司网站的建设与运营管理制度,网页升级访问新域名,北京到天津,网站网站建设公司上海1.14. 收集表单数据
收集表单数据:
若: #xff0c;则v-model收集的是value值#xff0c;用户输入的就是value值。若: #xff0c;则v-model收集的是value值#xff0c;且要给标签配置value值。若: 没有配置input的value属性#xff0c;那么收集的就是checked(勾选 or 未…1.14. 收集表单数据
收集表单数据:
若: 则v-model收集的是value值用户输入的就是value值。若: 则v-model收集的是value值且要给标签配置value值。若: 没有配置input的value属性那么收集的就是checked(勾选 or 未勾选是布尔值)配置input的value属性: v-model的初始值是非数组那么收集的就是checked(勾选 or 未勾选是布尔值)v-model的初始值是数组那么收集的的就是value组成的数组 v-model的三个修饰符: lazy: 失去焦点再收集数据number: 输入字符串转为有效的数字trim: 输入首尾空格过滤
!DOCTYPE html
headmeta charsetUTF-8title收集表单数据/title!-- 引入Vue --script typetext/javascript src../js/vue.js/script
/head
body!--收集表单数据:若: input typetext/则v-model收集的是value值用户输入的就是value值。若: input typeradio/则v-model收集的是value值且要给标签配置value值。若: input typecheckbox/1.没有配置input的value属性那么收集的就是checked(勾选 or 未勾选是布尔值)2.配置input的value属性:(1).v-model的初始值是非数组那么收集的就是checked(勾选 or 未勾选是布尔值)(2).v-model的初始值是数组那么收集的的就是value组成的数组备注: v-model的三个修饰符:lazy: 失去焦点再收集数据number: 输入字符串转为有效的数字trim: 输入首尾空格过滤--!-- 准备好一个容器 --div idrootform submit.preventdemo账号input typetext v-model.trimuserInfo.account br /br /密码input typepassword v-modeluserInfo.password br /br /年龄input typenumber v-model.numberuserInfo.age br /br /性别男input typeradio namesex v-modeluserInfo.sex valuemale女input typeradio namesex v-modeluserInfo.sex valuefemale br /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-model.lazyuserInfo.other/textarea br/br/input typecheckbox v-modeluserInfo.agree阅读并接受a hrefhttps://www.yuque.com/cessstudy《用户协议》/abutton提交/button/form/divscript typetext/javascript// 阻止vue在启动时生成生产提示Vue.config.productionTip falsenew 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
/body
/html1.15. 过滤器Vue3 已经移除
定义对要显示的数据进行特定格式化后再显示适用于一些简单逻辑的处理
注册过滤器
Vue.filter(name, callback) 全局过滤器**new Vue {filters: {}} **局部过滤器
使用过滤器{{ xxx | 过滤器名}} 或 v-bind:属性 “xxx | 过滤器名”
备注
过滤器可以接收额外参数多个过滤器也可以串联并没有改变原本的数据而是产生新的对应的数据
!DOCTYPE html
headmeta charsetUTF-8title过滤器/title!-- 引入Vue --script typetext/javascript src../js/vue.js/scriptscript typetext/javascript src../js/dayjs.min.js/script
/head
body!--过滤器:定义: 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)语法: 1.注册过滤器: Vue.filter(name,callback) 或 new Vue{filters:}2.使用过滤器: {( xxx | 过滤器名}} 或 v-bind:属性 “xxx过滤器名备注:1.过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据是产生新的对应的数据--!-- 准备好一个容器 --div idrooth2时间/h2h3当前时间戳{{time}}/h3!-- 计算属性实现 --h3现在是: {{fmtTime}}/h3!-- methods实现 --h3现在是: {{getFmtTime()}}/h3!-- 过滤器实现 --h3转换后时间{{time | timeFormater()}}/h3!-- 过滤器实现(传参) --h3转换后时间{{time | timeFormater(YYYY-MM-DD HH:mm:ss)}}/h3h3截取年月日{{time | timeFormater() | mySlice}}/h3h3 :xmsg | mySliceliqb/h3/divdiv idroot2h2{{msg | mySlice}}/h2/divscript typetext/javascript// 阻止vue在启动时生成生产提示Vue.config.productionTip false// 全局过滤器 Vue.filter(mySlice,function(value){return value.slice(0,11);})new Vue({ el: #root, data:{time:1626750147900,msg: li qi bin love fan wen yu},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){ return dayjs(value).format(str);},// mySlice(value) {// return value.slice(0,11);// }}});new Vue({el: #root2,data: {msg: li qi bin love fan wen yu}});/script
/body
/html
