Vue之过滤器浅析

Vue过滤器

一.Vue过滤器概念

​ 过滤器是对即将显示的数据做进一步的筛选处理，然后进行显示，值得注意的是过滤器并没有改变原来的数据，只是在原数据的基础上产生新的数据。

二.过滤器使用

1.过滤器的定义

过滤器的定义有两种方式:全局定义和局部定义

• 全局定义

   		/*
        Vue.filter(filterName,callback);
        filterName 过滤器的名字
        callback 过滤器的逻辑操作,必须要有返回值
                 value  要过滤显示的数据
        */

		Vue.filter('rmb', function (value) {
            return "$" + value;
        });

• 局部定义

 		/*
 			//定义局部组件
 			filters: {
 				//局部组件名称
                getno: function (value) {
                    return 'R' + value;
                }
            }
            
         */
		const vm = new Vue({
            el: '#app',
            data: {
                price: 100,
                orderno: '15343435353'
            },
            filters: {
                getno: function (value) {
                    return 'R' + value;
                }
            }
        });

2.过滤器的使用

使用方式只有两种 双花括号插值 和v-bind表达式

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

在双花括号中:

	<div id="app">
        /*
        * price 需要处理的数据
        * rmb  过滤器的名称
        */
        {{price | rmb}}
        {{orderno | getno}}
    </div>

在一些电商网站中,还有经常会处理一些单号的过程中,我们都需要使用到过滤器 比如 金额前面加美元或人民币的单位之类,或者单号前面加前缀之类.其实还有很多应用

在v-bind中

       <!-- 在 `v-bind` 中 -->
        <span v-bind:price="price | rmb"></span>
        <span v-bind:orderno="orderno | getno"></span>