Vue过滤器详解

最新推荐文章于 2024-01-05 10:00:00 发布

独孤求赞

最新推荐文章于 2024-01-05 10:00:00 发布

阅读量354

点赞数 2

分类专栏： vue 文章标签： vue.js javascript html5 es6

本文链接：https://blog.csdn.net/weixin_44989478/article/details/106785891

版权

vue 专栏收录该内容

18 篇文章 0 订阅

订阅专栏

在我看来过滤器其实就是处理数据的函数，Vue可以自定义过滤器，可用在两个地方：双花括号和v-bind表达式。v-bind是从2.1.0+才开始支持，小伙伴们可得注意了。
下面看下计算时间间隔的局部过滤器的例子：

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title></title>
</head>
<body>

<div id="container">
    <p>开始时间：{{startTime}}</p>
    <p>结束时间：{{endTime}}</p>
    <p>间隔时间：{{startTime | intervalTime(endTime)}}</p>
</div>

<script>
    new Vue({
        el: '#container',
        data: {
         	startTime：'2019-12-12 06:06:06',
         	endTime:'2019-12-18 06:06:06',
        },
        filters:{
            intervalTime(startTime,endTime){
                let start=startTime.replace(/-/g,'/');
        		let end=endTime.replace(/-/g,'/');
        		let duration=new Date(end).getTime()-new Date(start).getTime(); //毫秒
        		let days=Math.floor(duration/1000/60/60/24);
       			let hours=Math.floor(duration%(1000*60*60*24)/1000/60/60);
        		let minutes=Math.floor(duration%(1000*60*60)/1000/60);
        		let seconds=duration%(1000*60)/1000
        		if(days==0){
          			return hours+'小时'+minutes+'分钟'+seconds+'秒';
        		}else{
          			return days+'天'+hours+'小时'+minutes+'分钟'+seconds+'秒'
        		}
            }
        }
    })
</script>

</body>
</html>

代码中，我们向过滤器传递了两个参数，而在渲染的时候，就会通过过滤器把结果渲染在标签中。
因为过滤器是 JavaScript 函数，所以可以接收参数：

{{ message | filterA('arg1', arg2) }}

这里，filterA 被定义为接收三个参数的过滤器函数。其中 message 的值作为第一个参数，普通字符串 ‘arg1’ 作为第二个参数，表达式 arg2 的值作为第三个参数。
至于全局过滤器也很简单，我们只需要在main.js中：

Vue.filter('intervalTime',function(startTime,endTime){
     			let start=startTime.replace(/-/g,'/');
        		let end=endTime.replace(/-/g,'/');
        		let duration=new Date(end).getTime()-new Date(start).getTime(); //毫秒
        		let days=Math.floor(duration/1000/60/60/24);
       			let hours=Math.floor(duration%(1000*60*60*24)/1000/60/60);
        		let minutes=Math.floor(duration%(1000*60*60)/1000/60);
        		let seconds=duration%(1000*60)/1000
        		if(days==0){
          			return hours+'小时'+minutes+'分钟'+seconds+'秒';
        		}else{
          			return days+'天'+hours+'小时'+minutes+'分钟'+seconds+'秒'
        		}
})

调用和局部的是一样的。至于全局还是局部这个大家可以按照自己的需求来决定。
下面来看下v-bind的使用方法

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <script src="js/vue.js"></script>
    <title></title>
</head>
<body>

<div id="container">
  <div :id="'good' | rever">66666666</div> 
</div>

<script>
    new Vue({
        el: '#container',
        data: {
         	startTime：'2019-12-12 06:06:06',
         	endTime:'2019-12-18 06:06:06',
        },
        filters:{
            rever(id){
  				  return id.split('').reverse().join('');
            }
        }
    })
</script>

</body>
</html>

注意：当全局过滤器和局部过滤器重名时，会采用局部过滤器。

好了，就是这么简单而且简单。

独孤求赞

关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
Vue过滤器详解

在我看来过滤器其实就是处理数据的函数，Vue可以自定义过滤器，可用在两个地方：双花括号和v-bind表达式。v-bind表示从2.1.0+才开始支持，小伙伴们可得注意了。下面看下计算时间间隔的局部过滤器的例子：<!DOCTYPE html><html><head lang="en"> <meta charset="UTF-8"> <script src="js/vue.js"></script> <
复制链接

扫一扫

专栏目录