复习Vue17:过滤器
17.1 过滤器基本使用
过滤器在日常生活中也是比较常见的,例如自来水的过滤等。
在Vue
中,过滤器的作用就是格式化数据,也就是对数据的过滤处理,比如将字符串格式化为首字母大写
或者将日期格式化为指定的格式等。
下面先看一下自定义过滤器的语法
Vue.filter('过滤器名称',function(value){
//value参数表示要处理的数据
//过滤器业务逻辑,最终将处理后的数据进行返回
})
定义好以后可以使用。使用的方式如下:
<div>{{msg|upper}}</div>
<div>{{msg|upper|lower}}</div>
具体的程序如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>过滤器基本使用</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<div>
<!--使用过滤器-->
{{msg|upper}}
</div>
</div>
<script src="vue.js"></script>
<script>
//定义过滤器,让输入的单词首字母变成大写.
Vue.filter("upper", function (value) {
//获取首字母让其转换成大写,然后拼接后面的内容。
return value.charAt(0).toUpperCase() + value.slice(0);
});
const vm = new Vue({
el: "#app",
data: {
msg: "",
},
});
</script>
</body>
</html>
过滤器在使用的时候,可以采用如下的方式:
<div>{{msg|upper|lower}}</div>
也就是,先对msg
中的数据使用upper
过滤器,得到的结果在交给lower
过滤器进行处理。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>过滤器基本使用</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<div>
{{msg|upper}}
</div>
<div>
{{msg|upper|lower}}
</div>
</div>
<script src="vue.js"></script>
<script>
//定义过滤器,让输入的单词首字母变成大写.
Vue.filter("upper", function (value) {
//获取首字母让其转换成大写,然后拼接后面的内容。
return value.charAt(0).toUpperCase() + value.slice(0);
});
Vue.filter("lower", function (value) {
return value.charAt(0).toLowerCase() + value.slice(0);
});
const vm = new Vue({
el: "#app",
data: {
msg: "",
},
});
</script>
</body>
</html>
上面定义的顾虑器是全局的过滤器,当然也可以定义局部过滤器。
局部过滤器只能在其所定义的组件内使用。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>过滤器基本使用</title>
</head>
<body>
<div id="app">
<input type="text" v-model="msg" />
<div>
{{msg|upper}}
</div>
<div>
{{msg|upper|lower}}
</div>
</div>
<script src="vue.js"></script>
<script>
//定义过滤器,让输入的单词首字母变成大写.
// Vue.filter("upper", function (value) {
// //获取首字母让其转换成大写,然后拼接后面的内容。
// return value.charAt(0).toUpperCase() + value.slice(0);
// });
Vue.filter("lower", function (value) {
return value.charAt(0).toLowerCase() + value.slice(0);
});
const vm = new Vue({
el: "#app",
data: {
msg: "",
},
//局部过滤器
filters: {
upper: function (value) {
return value.charAt(0).toUpperCase() + value.slice(0);
},
},
});
</script>
</body>
</html>
在上面的代码中,我们通过fileters
定义了一个局部的过滤器upper
.
在前面,我们也说过Vue
实例本身就是一个组件。
17.2 带参数的过滤器
带参数的过滤器定义如下:
Vue.filter('format',function(value,arg1){
//value表示要过滤的数据。
//arg1,表示传递过来的参数
})
使用的方式如下
<div>
{{data|format(`yyyy-MM-dd`)}}
</div>
要处理的数据data
交给了过滤器中回调函数的value
参数,yyyy-MM-dd
交给了arg1
.
如下代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>过滤器参数</title>
</head>
<body>
<div id="app">
<div>
{{date|format('abc','hello')}}
</div>
</div>
<script src="vue.js"></script>
<script>
Vue.filter("format", function (value, arg, arg1) {
console.log(arg, arg1);
return value;
});
const vm = new Vue({
el: "#app",
data: {
date: new Date(),
},
});
</script>
</body>
</html>
在上面的代码中,我们定义了format
过滤器,然后在使用的时候,我们是将date
日期数据给了value
abc
这个字符串给了arg
,hello
给了arg1
.
下面,我们把日期给具体的处理一下
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>过滤器参数</title>
</head>
<body>
<div id="app">
<div>
{{date|format('yyyy-MM-dd')}}
</div>
</div>
<script src="vue.js"></script>
<script>
Vue.filter("format", function (value, arg, arg1) {
let result = "";
result +=
value.getFullYear() +
"-" +
(value.getMonth() + 1) +
"-" +
value.getDate();
return result;
});
const vm = new Vue({
el: "#app",
data: {
date: new Date(),
},
});
</script>
</body>
</html>