1. 收集表单数据
收集表单数据:
若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若:<input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若: <input type="checkbox" />
- 没有配置input的value属性，那么收集的就是checked(勾选or未勾选，是布尔值)
- 配置input的value属性:
(1) v-model的初始值是非数组，那么收集的就是checked（勾选or未勾选，是布尔值)
(2) v-model的初始值是数组,那么收集的的就是value组成的数组
备注: v-model的三个修饰符:
lazy: 失去焦点再收集数据
number: 输入字符串转为有效的数字
trim: 输入首尾空格过滤
<body> <div id="root"> <form @submit.prevent="sendUserInfo"> 账号：<input type="text" name="" v-model.trim="userInfo.username"><br /><br /> 密码：<input type="password" v-model="userInfo.password"><br /><br /> 年龄：<input type="number" v-model.number="userInfo.age"><br /><br /> 性别： 男 <input type="radio" name="sex" v-model="userInfo.sex" value="male"> 女 <input type="radio" name="sex" v-model="userInfo.sex" value="female"><br /><br /> 爱好： 学习 <input type="checkbox" v-model="userInfo.hobby" value="study"> 打游戏 <input type="checkbox" v-model="userInfo.hobby" value="game"> 吃饭 <input type="checkbox" v-model="userInfo.hobby" value="eat"><br /><br /> 所属校区 <select v-model="userInfo.city"> <option value="">请选择校区</option> <option value="beiJing">北京</option> <option value="shangHai">上海</option> <option value="shenZhen">深圳</option> <option value="wuHan">武汉</option> </select><br /><br /> 其它信息： <textarea v-model.lazy="userInfo.other"></textarea><br /><br /> <input type="checkbox" v-model="userInfo.agree">阅读并接受<a href="www.baidu.com">协议</a><br /><br /> <button>提交</button> </form> </div> </body> <script> new Vue({ el: '#root', data() { return { userInfo: { username: '', password: '', age: '', sex: '', hobby: [], city: '', other: '', agree: false } } }, methods: { sendUserInfo() { console.log(this.userInfo); alert(提交信息); } }, }) </script>
2. 过滤器
定义: 对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理）。
语法:
- 注册过滤器:Vue.filter(name,callback)或new Vue{filters:{}}
- 使用过滤器:{{ xxx│过滤器名}}或v-bind:属性=“xxx|过滤器名"
- 备注:
- 过滤器也可以接收额外参数、多个过滤器也可以串联
- 并没有改变原本的数据,是产生新的对应的数据
<head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="js/vue.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.10.6/dayjs.min.js"></script> </head> <body> <div id="root"> <h1>显示格式化时间</h1> <!-- 计算属性实现 --> <h2>时间：{{fmTime}}</h2> <!-- methods实现 --> <h2>时间：{{getFmTime()}}</h2> <!-- 过滤器实现 --> <h2>时间：{{dateTime | timeFormater}}</h2> <!-- 过滤器的传参 --> <h2>时间：{{dateTime | timeFormater('YYYY-MM-DD')}}</h2> <!-- 过滤器的串联 --> <h2>时间：{{dateTime | timeFormater('YYYY-MM-DD') | mySlice}}</h2> <h2></h2> </div> </body> <script> //注册全局过滤器 Vue.filter('mySlice2', function (value) { return value.slice(0, 5); }); new Vue({ el: '#root', data() { return { dateTime: 1621561377603 } }, computed: { fmTime() { return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') } }, methods: { getFmTime() { return dayjs(this.time).format('YYYY年MM月DD日 HH:mm:ss') } }, filters: { // timeFormater(value) { // return dayjs(value).format('YYYY年MM月DD日 HH:mm:ss') // } timeFormater(value, str = 'YYYY年MM月DD日 HH:mm:ss') { return dayjs(value).format(str) }, mySlice(value) { return value.slice(0, 4) } } }) </script>
