vue2_10、收集表单数据、过滤器
1、收集表单数据
收集表单数据
-
若：
<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。 -
若：
<input type="radio"/>，则v-model收集的是value值，且要给标签配置value属性。 -
若：
<input type="checkbox"/>
1.没有配置input的value属性，那么收集的就是checked（勾选 or 未勾选，是布尔值）
2.配置input的value属性:
(1)v-model的初始值是非数组，那么收集的就是checked（勾选 or 未勾选，是布尔值）
(2)v-model的初始值是数组，那么收集的的就是value组成的数组。
备注：v-model的三个修饰符：
lazy：失去焦点再收集数据
number：输入字符串转为有效的数字
trim：输入首尾空格过滤
<!DOCTYPE html>
<html lang="en">
<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>收集表达信息</title>
<script src="../vueBaseJs/vue.js"></script>
</head>
<body>
<div id="root">
<form @submit.prevent="demo">
账号：<input type="text" v-model.trim="userInfo.account"> <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" value="male" v-model="userInfo.sex" >
女<input type="radio" name="sex" value="female" v-model="userInfo.sex"> <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="">《用户协议》</a>
<button id="btn1">提交</button>
</form>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
const vm=new Vue({
el:"#root",
data:function(){
return {
userInfo:{
account:"",
password:"",
age:0,
sex:"male",
hobby:[],//hobby的初始值能够影响v-model收集的数据
city:"beijing",
other:"",
agree:false,
},
}
},
methods:{
demo(){
console.log(JSON.stringify(this.userInfo));
}
}
});
</script>
</body>
</html>
2、过滤器(Vue3已移除)
定义：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理）。
语法：
1.注册过滤器：Vue.filter(name,callback) 或 new Vue{filters:{}}
2.使用过滤器：{{ xxx | 过滤器名}} 或 v-bind:属性 = "xxx | 过滤器名"
备注：
1.过滤器也可以接收额外参数、多个过滤器也可以串联
2.并没有改变原本的数据, 是产生新的对应的数据
用到的插件：dayjs，用来格式化时间格式
<!DOCTYPE html>
<html lang="en">
<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></title>
<script src="../vueBaseJs/vue.js"></script>
<script type="text/javascript" src="../vueBaseJs/dayjs.min.js"></script>
</head>
<body>
<!-- 准备好一个容器-->
<div id="root">
<h2>显示格式化后的时间{{fmtTime}}</h2>
<!-- 计算属性实现 -->
<h3>现在是：{{fmtTime}}</h3>
<!-- methods实现 -->
<h3>现在是：{{getFmtTime()}}</h3>
<!-- 过滤器实现 -->
<h3>现在是：{{time | timeFormater}}</h3>
<!-- 过滤器实现（传参） -->
<h3>现在是：{{time | timeFormater("YYYY-MM-DD")}}</h3>
<!-- 过滤器实现（传参）多个过滤器串联 -->
<h3>现在是：{{time | timeFormater("YYYY-MM-DD")| mySlice}}</h3>
</div>
<div id="root2">
<h2>{{name | mySlice}}</h2>
</div>
<script type="text/javascript">
Vue.config.productionTip=false;//阻止vue启动时生成生产提示
//全局过滤器必须在Vue实例创建前创建
Vue.filter("mySlice",function(parame){
return parame.slice(0,4);
});
const vm=new Vue({
el:"#root",
data:function(){
return {
time:1649073857323
}
},
computed:{
fmtTime:{
get(){
return dayjs(this.time).format('YYYY年 MM 月-DD日 HH:mm:ss SSS ') ;
},
set(value){
}
}
},
methods:{
getFmtTime(){
return dayjs(this.time).format('YYYY年 MM 月-DD日 HH:mm:ss SSS ') ;
}
},
//局部过滤器：只有在当前vm实例里面使用，其它组件获取别的vue实例用不了
filters:{//过滤器配置对象
timeFormater(parame,str='YYYY年 MM 月-DD日 HH:mm:ss SSS '){
return dayjs(parame).format(str) ;
},
//局部的mySlice过滤器
// mySlice(parame){
// return parame.slice(0,4);
// }
}
});
const vm2=new Vue({
el:"#root2",
data:{
name:"Hello World!"
}
});
</script>
</body>
</html>
