• vue当中的收集表单数据以及过滤器

    1.上代码：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>收集表单数据</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 	</head>
    8. 	<body>
    9. 		<div id="root">
    10. 			<form @submit.prevent="demo">
    11. 				账号：<input type="text" v-model.trim="userInfo.account"> <br/><br/>
    12. 				密码：<input type="password" v-model="userInfo.password"> <br/><br/>
    13. 				年龄：<input type="number" v-model.number="userInfo.age"> <br/><br/>
    14. 				性别：
    15. 				男<input type="radio" name="sex" v-model="userInfo.sex" value="male">
    16. 				女<input type="radio" name="sex" v-model="userInfo.sex" value="female"> <br/><br/>
    17. 				爱好：
    18. 				学习<input type="checkbox" v-model="userInfo.hobby" value="study">
    19. 				打游戏<input type="checkbox" v-model="userInfo.hobby" value="game">
    20. 				吃饭<input type="checkbox" v-model="userInfo.hobby" value="eat">
    21. 				<br/><br/>
    22. 				所属校区：
    23. 				<select v-model="userInfo.city">
    24. 					<option value="">请选择校区</option>
    25. 					<option value="beijing">北京</option>
    26. 					<option value="shanghai">上海</option>
    27. 					<option value="shenzhen">深圳</option>
    28. 					<option value="wuhan">武汉</option>
    29. 				</select>
    30. 				<br/><br/>
    31. 				其他信息：
    32. 				<textarea v-model.lazy="userInfo.other"></textarea> <br/><br/>
    33. 				<input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="http://www.atguigu.com">《用户协议》</a>
    34. 				<button>提交</button>
    35. 			</form>
    36. 		</div>
    37. 	</body>
    38.  
    39. 	<script type="text/javascript">
    40. 		Vue.config.productionTip = false
    41.  
    42. 		new Vue({
    43. 			el:'#root',
    44. 			data:{
    45. 				userInfo:{
    46. 					account:'',
    47. 					password:'',
    48. 					age:0,
    49. 					sex:'female',
    50. 					hobby:[],
    51. 					city:'beijing',
    52. 					other:'',
    53. 					agree:''
    54. 				}
    55. 			},
    56. 			methods: {
    57. 				demo(){
    58. 					console.log(JSON.stringify(this.userInfo))
    59. 				}
    60. 			}
    61. 		})
    62. 	</script>
    63. </html>

    2.知识点总结：

    收集表单数据：

    若：，则v-model收集的是value值，用户输入的内容就是value值
    若：，则v-model收集的是value值，且要给标签配置value属性
    若：
    没有配置value属性，那么收集的是checked属性（勾选 or 未勾选，是布尔值）
    配置了value属性：
    v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
    v-model的初始值是数组，那么收集的就是value组成的数组
    v-model的三个修饰符：

    lazy：失去焦点后再收集数据
    number：输入字符串转为有效的数字
    trim：输入首尾空格过滤
     

    3.效果图：

    4.过滤器知识点总结：

    过滤器：

    定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。

    语法：

    注册过滤器：Vue.filter(name,callback) 或 new Vue（{filters:{}}）

    使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
     

    5.代码示例：

    1. <!DOCTYPE html>
    2. <html>
    3. 	<head>
    4. 		<meta charset="UTF-8" />
    5. 		<title>过滤器</title>
    6. 		<script type="text/javascript" src="../js/vue.js"></script>
    7. 		<script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script>
    8. 	</head>
    9. 	<body>
    10. 		<div id="root">
    11. 			<h2>时间</h2>
    12.             <h3>当前时间戳：{{time}}</h3>
    13.             <h3>转换后时间：{{time | timeFormater()}}</h3>
    14. 			<h3>转换后时间：{{time | timeFormater('YYYY-MM-DD HH:mm:ss')}}</h3>
    15. 			<h3>截取年月日：{{time | timeFormater() | mySlice}}</h3>
    16. 		</div>
    17. 	</body>
    18.  
    19. 	<script type="text/javascript">
    20. 		Vue.config.productionTip = false
    21. 		//全局过滤器
    22. 		Vue.filter('mySlice',function(value){
    23. 			return value.slice(0,11)
    24. 		})
    25. 		new Vue({
    26.             el:'#root',
    27.             data:{
    28.                 time:1626750147900,
    29.             },
    30. 			//局部过滤器
    31.             filters:{
    32.                 timeFormater(value, str="YYYY年MM月DD日 HH:mm:ss"){
    33.                     return dayjs(value).format(str)
    34.                 }
    35.             }
    36.         })
    37. 	</script>
    38. </html>

    6.效果图

     

  • 相关阅读:
    设计模式之享元模式
    c++-基本计算器的灵活可扩展实现
    ceph的体系结构
    区块链实验室(25) - FISCO中PBFT耗时特征
    SAP 的数据战略之数据素养
    MySql基础篇——变量、流程控制与游标
    【Java毕设项目】基于SpringBoot+Vue教务管理系统的开发与实现
    Spring Cloud Gateway详解
    Spring Boot异常处理和单元测试
    【《C Primer Plus》读书笔记】第10章：数组和指针
  • 原文地址：https://blog.csdn.net/m0_68997646/article/details/127567732