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>
