Vue.js学习笔记5——过滤器

武汉小喽啰

于 2019-09-22 20:58:10 发布

阅读量132

点赞数

分类专栏： # vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_43318134/article/details/101171547

版权

vue 专栏收录该内容

46 篇文章 8 订阅

订阅专栏

1. 过滤器简介

Vue.js允许你自定义过滤器，可被用作一些常见的文本格式。

过滤器可以用在两个地方：mustache差值和v-bind表达式。

过滤器应该被添加在js表达式的尾部，由“管道”符“ | ”指示。

2. 全局过滤器

所有的VM实例都可以调用

2.1 过滤器调用时候的格式

2.2 过滤器的定义

Vue.filter('过滤器的名称'，function(data){});

参数解析：
1. 过滤器的名称
2. 回调函数，用于处理逻辑。回调函数参数
2.1 data：为数据源，即为调用过滤器的表达式管道左边的数据。

例如：

<body>
    
    <div id="app">

       <p>{{ msg | msgFormat }}</p>

    </div>

    <script>

		Vue.filter('msgFormat',function(msg){
			return msg.replace('世界','中国');
		})
        var vm = new Vue({
            el:'#app',
            data:{
				msg:'你好啊，世界！'
            },
            methods:{
                
            }
        });
    </script>

</body>

2.3 过滤器传递参数

<body>
    
    <div id="app">

       <p>{{ msg | msgFormat('中国') }}</p>

    </div>

    <script>

		Vue.filter('msgFormat',function(msg,arg){
			return msg.replace('世界',arg);
		})
        var vm = new Vue({
            el:'#app',
            data:{
				msg:'你好啊，世界！世界！'
            },
            methods:{
                
            }
        });
    </script>

</body>

2.4 过滤器的链式调用

<body>
    
    <div id="app">

       <p>{{ msg | msgFormat('中国') | test('=====') }}</p>

    </div>

    <script>

		Vue.filter('msgFormat',function(msg,arg){
			return msg.replace('世界',arg);
		})
		Vue.filter('test',function(data,arg){
			return data + arg;
		})

        var vm = new Vue({
            el:'#app',
            data:{
				msg:'你好啊，世界！世界！'
            },
            methods:{
                
            }
        });
    </script>

</body>

3 自定义时间过滤器

Vue.filter('dateFormat',function(dateStr,partten="yyyy-mm-dd"){ // ES6语法，为了防止partten参数为空的情况，给它一个默认值
			var d = new Date(dateStr);
    		var y = d.getFullYear();
    		var m = d.getMonth() + 1;
    		var d1 = d.getDate();
//  		return y + '-' + m + '-' + d1;
			if(partten.toLowerCase() == 'yyyy-mm-dd'){
				return `${y}-${m}-${d1}`;  // 模板字符串
			}else{
				return `${y}:${m}:${d1}`;  // 模板字符串
			}
			
		});

注意：

1. 这里使用模板字符串，用于返回指定格式的时间字符串。
2. 模板字符串格式为反引号里面写表达式。
3. ES6新语法：在定义函数的时候，可以给形参赋初值。
4. 过滤器除了第一个数据源参数，其他的参数都是可选的

4. 私有过滤器

4.1 定义位置

在VM实例里面有一个filters，私有的过滤器都定义在这里

4.2 定义格式

与methods平级的地方跟定义方法一样

new Vue({
        	el:"#app2",
        	data:{
        		dt:new Date()
        	},
        	methods:{},
        	filters:{
        		dateFormate:function(dateStr,partten='yyyy-mm-dd'){
        			var d = new Date(dateStr);
		    		var y = d.getFullYear();
		    		var m = d.getMonth() + 1;
		    		var d1 = d.getDate();
		//  		return y + '-' + m + '-' + d1;
					if(partten.toLowerCase() == 'yyyy-mm-dd'){
						return `${y}-${m}-${d1}abc`;  // 模板字符串
					}else{
						return `${y}:${m}:${d1}abc`;  // 模板字符串
					}
		        }
		    }
        });