过滤器
过滤器的基本使用
vue提供了过滤器的语法, 可以用于格式化文本 (日期)、封装对于字符串操作的过程
基本使用 => 让英文转大写
-
定义过滤器
Vue.filter(过滤器名字, 处理字符串的函数)
- 这个函数的返回值, 就是处理完成的结果
- 函数的第一个参数,就是需要操作的字符串
-
使用过滤器
{ { msg | 过滤器名字 }}
代码演示:
<body>
<div id="app">
<h1>{
{ msg | upper }}</h1>
<h1>{
{ msg2 | upper }}</h1>
</div>
<script src="./vue.js"></script>
<script>
// 开发过程中, 经常需要对字符串进行操作, 有一些字符串的操作是相同的, 我们可以考虑封装这些相同的操作
// vue中, 有一个过滤器, 可以专门封装对于字符串的操作过程
// 语法:
// 1. 定义过滤器
// Vue.filter('过滤器的名字', '处理字符串的函数')
// (1) 函数的返回值, 就是处理的结果
// (2) 函数的第一个参数, 就是需要操作的字符串
// 2. 使用过滤器
// {
{ msg | 过滤器的名字 }}
// 表示: 这个msg, 将被这个过滤器处理
Vue.filter('upper', function(value) {
return value.toUpperCase()
})
const vm = new Vue({
el: '#app',
data: {
msg: 'hello vue',
msg2: 'shuai peng'
}
})
</script>
</body>
过滤器 - 处理日期格式
一般后台会返回的是一个时间戳, 每次都要处理很麻烦
跟你一个时间戳,要什么格式自己处理
npm i moment
代码演示:
<body>
<div id="app">
<h1>{
{ date1 | time }}</h1>
<h1>{
{ date2 | time }}</h1>
</div>
<script src="./node_modules/moment/moment.js"></script>
<script src="./vue.js"></script>
<script>
// 对于日期的处理, 将来后台很可能会返回一个日期时间戳
// 跟你一个时间戳, 你要什么格式, 自己处理
Vue.filter('time', function(value) {
return moment(value).format('YYYY年MM月DD日 HH:mm:ss')
})
const vm = new Vue({
el: '#app',
data: {
date1: 1595832673946,
date2: 1815832673946
}
})
</script>
</body>
过滤器 - 参数的问题
使用时,支持传参
{
{
msg | time1 }} 正常使用
{
{
msg | time1(额外传递的参数1, 额外的参数2, ...) }} 正常使用
注意:过滤器第一个参数,永远都是要操作的字符串,后面才是传递的额外的参数
代码演示:
<body>
<div id="app">
<h1>{
{ date1 | time('YYYY年MM月DD日') }}</h1>
<h1>{
{ date2 | time('YYYY/MM/DD') }}</h1>
<h1>{
{ date3 | time }}</h1>
</div>
<script src="./node_modules/moment/moment.js"></script>
<script src="./vue.js"></script>
<script>
// 对于日期的处理, 将来后台很可能会返回一个日期时间戳
// 跟你一个时间戳, 你要什么格式, 自己处理
// 过滤器的参数: 过滤器使用时, 支持传参的
// {
{ msg | time1 }} 正常使用
// {
{ msg | time1(额外传递的参数1, 额外传递的参数2, ....) }}
// 注意: 过滤器第一个参数, 永远是要操作的字符串, 后面才是传递的额外的参数(如果有)
Vue.filter('time', function(value, str="YYYY年MM月DD日 HH:mm:ss") {
return moment(value).format(str)
})
const vm = new Vue({
el: '#app',
data: {
date1: 1595832673946, // xxxx年xx月xx日 xx:xx:xx
date2: 1815832673946, // xxxx/xx/xx xx:xx:xx
date3: 2215832673946
}
})
</script>
</body>
全局和局部过滤器(暂时了解)
先学习语法,到后面项目才会详讲
**全局过滤器:**在任何的Vue实例中,都可以使用(后面我们会学习组件,每个组件其实都是一个Vue实例)
局部过滤器: 只能在当前Vue实例中使用 (在组件中第一的过滤器,只能在当前的组件使用)
代码演示:
<body>
<div id="app">
<h1>{
{ msg | global | demo }}</h1>
</div>
<div id="app2">