初学Vue
1、收集表单数据
示例
<!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">
<script src="../../JS/vue.js"></script>
<title>Document</title>
</head>
<body>
<div id="root">
<form @submit.prevent="demo"> <!--@submit.prevent="demo"用于绑定一个事件,表单提交时触发,并且阻止默认事件 -->
账号:<input type="text" v-model.trim="infoData.username"><br><br> <!--trim用于将用户两边输入的空格过滤-->
密码:<input type="number" v-model.number="infoData.password"><br><br>
<!-- type=number,使得输入框只能输入数字类型的数据,注意还是以字符串形式存储起来了 -->
<!-- v-model.number="xxx",可以将输入的字符串数字转换为number类型 -->
性别:
男<input type="radio" name="gender" v-model="infoData.gender" value="male">
女<input type="radio" name="gender" v-model="infoData.gender" value="female">
<br><br>
爱好:
唱歌<input type="checkbox" v-model="infoData.hobbies" value="sing">
跳舞<input type="checkbox" v-model="infoData.hobbies" value="dance">
摄影<input type="checkbox" v-model="infoData.hobbies" value="photo">
<br><br>
所属校区:
<select v-model="infoData.city">
<option value="">请选择校区</option>
<option value="beijing" >北京</option>
<option value="tianjin">天津</option>
<option value="hubei">湖北</option>
<option value="hunan">湖南</option>
</select>
<br><br>
其他消息:
<textarea cols="20" rows="3" v-model="infoData.otherInfo"></textarea>
<br><br>
<input type="checkbox" v-model="infoData.agree">阅读并接受<a href="#">《用户协议》</a>
<br><br>
<button>提交</button>
</form>
</div>
<script>
Vue.config.productionTip = false;
const vm = new Vue({
el:"#root",
data:{
// 使用一个对象包裹表单中的数据
infoData:{
username:"",
password:"",
gender:"",
hobbies:[], // 因为可以勾选多个,那么这里用数组存储
city:"",
otherInfo:"",
agree:"",
}
},
methods:{
// 表单提交时触发的事件
demo(){
// 将表单中的数据输入到控制台
console.log(this.infoData);
// 或者转换为json字符串
console.log(JSON.stringify(this.infoData));
}
}
});
</script>
</body>
</html>
结果:
总结
收集表单数据时,表单元素的使用注意项:
(1)对于< input type=“text”/>,则v-model收集的是value值,用户输入的就是value值
(2)对于< input type=“radio”/>,则v-model收集的是value值,且要给标签配置value属性和属性值
(3)对于< input type=“checkbox”/>
1、没有配置input的value属性,那么收集的就是checked属性的值(true或者false)。因此当出现多个checkbox的时候可能会出现这种情况,勾选一个,另外几个也会被勾选上,因为改变了checked属性,所有多选框的checked属性值也会被改。
2、如果配置了input的value属性,并且如果v-model的初始值是非数组,那么收集的就是checked属性的值;如果v-model的初始值是数组,那么收集的就是value组成的数组。
补充:v-model的三个修饰符
lazy:失去焦点时再收集数据
number:输入字符串时转为有效的数字
trim:过滤输入数据前后两端的空格
2、过滤器
2.1 定义
过滤器是对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理)
2.2 使用
-
注册过滤器
第一种方式:局部配置,在Vue中使用配置项filters,如下
new Vue{filters:{}}
第二种方式:全局配置
Vue.filter(name,callback) -
使用过滤器
第一种方式:{{ xxx | 过滤器名}}(xxx是要过滤的对象,通过管道符后面的过滤器进行数据的过滤)
第二种方式:v-bind:属性 = “xxx | 过滤器名”
过滤器可以接收额外参数,并且可以连着使用多个过滤器,过滤器并不会改变原始数据,只是根据原本数据产生新的数据。
2.2.1 插值语法中写过滤器
- 局部配置:new Vue({filters{}})
<!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">
<script src="../../JS/vue.js"></script>
<script src="../../JS/dayjs.min.js"></script>
<!-- dayjs.min.js可以看成是moment.js的轻量级 -->
<title>时间戳转换为标准时间</title>
</head>
<body>
<style>
h2{
color:aqua
}
</style>
<div id="root">
<h3>当前时间的时间戳:{{time}}</h3>
<h2>时间戳转换为标准时间</h2>
<h3>计算属性实现:{{formatTime}}</h3>
<h3>methods方法实现:{{getFormatTime()}}</h3>
<h3>过滤器实现:{{time | getFormatTimeByFilter()}}</h3>
<h3>过滤器传参:{{time | getFormatTimeByFilterWithValue("YYYY_MM_DD")}}</h3>
<hr>
<h3>过滤器传参与不传参合并写-传参时:{{time | getFormatTimeByFilter2("YYYY_MM_DD")}}</h3>
<h3>过滤器传参与不传参合并写-不传参时:{{time | getFormatTimeByFilter2()}}</h3>
<hr>
<!-- 在获取标准时间后,在截取前四位 -->
<h3>同时使用多个过滤器:{{time | getFormatTimeByFilter() | mySlice()}}</h3>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
time:Date.now(),
},
computed:{
formatTime(){
// 在dayjs中有一个format方法可以i将时间戳转换为标准时间
return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
}
},
methods:{
getFormatTime(){
return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
}
},
filters:{
getFormatTimeByFilter(){
return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
},
// 过滤器传参:value参数是管道符前面的time,formatStr是重新给定的格式,并不是必须的
getFormatTimeByFilterWithValue(value,formatStr){
console.log("@",value); // value值是时间戳
return dayjs(value).format(formatStr); // 返回指定格式的时间
},
// 也可以将上面的两个过滤器合并成一个,传参与不传参是返回不同格式的时间
getFormatTimeByFilter2(value,str="YYYY-MM-DD HH:mm:ss"){
return dayjs(value).format(str);
},
// 截取结果前四位
mySlice(value){
return value.slice(0,4);
}
}
});
</script>
</body>
</html>
结果参考
过滤器实现图示:
连续使用多个过滤器的过程图示:
- 全局配置
使用注意:在创建Vue之前就要先准备好全局过滤器
<!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">
<script src="../../JS/vue.js"></script>
<script src="../../JS/dayjs.min.js"></script>
<!-- dayjs.min.js可以看成是moment.js的轻量级 -->
<title>时间戳转换为标准时间</title>
</head>
<body>
<style>
h2{
color:aqua
}
</style>
<div id="root">
<h3>当前时间的时间戳:{{time}}</h3>
<h2>时间戳转换为标准时间</h2>
<h3>{{time | getFormatTimeByFilter | mySlice}}</h3>
</div>
<script>
Vue.config.productionTip = false;
// 全局过滤器
Vue.filter("mySlice",function(value){
// 全局过滤器名字mySlice,作用是截取结果前四位
return value.slice(0,4);
});
new Vue({
el:"#root",
data:{
time:Date.now(),
},
filters:{
getFormatTimeByFilter(){
return dayjs(this.time).format("YYYY-MM-DD HH:mm:ss");
},
}
});
</script>
</body>
2.2.2 v-bind属性中使用过滤器
除了插值语法的形式外,v-bind属性也使用过滤器,如下
<body>
<div id="root">
<h3 :x="msg | mySlice">你好世界</h3>
</div>
<script>
Vue.config.productionTip = false;
new Vue({
el:"#root",
data:{
msg:"helloWorld"
},
filters:{
mySlice(value){
return value.slice(0,4);
}
}
});
</script>
</body>