Vue过滤器
1.过滤器的基本使用
Vue允许自定义过滤器，可被用于一些常见的文本格式化。
过滤器可以用在两个地方：双大括号表达式和v-bind表达式
过滤器应该被添加在js表达式尾部，由｜指示
例如
{{message|myVue}} <div v-bind:id="rawId|format"></div> 复制代码
过滤器分为两种：全局过滤器、局部过滤器
2.全局过滤器
如果各种地方都要使用一个过滤器，那就定义全局过滤器(也就是过滤器定义在Vue实例之前)
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>全局过滤器 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> </div> <script type="text/javascript"> let App={ template: '<div><input type="text" v-model="text">{{text|myvue("Hi","Shelgi")}}</div>', data(){ return { text:'' } } } Vue.filter('myvue',function (val1,val2,val3){ return val2+val3+': '+val1.split('').reverse().join(''); }) new Vue({ el:'#app', components:{'app':App}, template:'<app />' }) </script> </body> </html> 复制代码
3.局部过滤器
局部过滤器与全局过滤器使用方法上一样，唯一的区别就是局部过滤器是定义在Vue实例中的，作用域也就是Vue实例的作用域
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>局部过滤器 demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> </div> <script type="text/javascript"> let App= { template: '<div><input type="text" v-model="text">{{text|myvue}}</div>', data() { return { text: '', }; }, filters: { myvue: function (val) { return 'Hi Shelgi'; } } } new Vue({ el:"#app", components:{'app':App}, template:'<app />' }) </script> </body> </html> 复制代码
虽然我使用了v-model进行双向绑定，但是input输入的内容不会对右边产生影响，这说明过滤器中显示的是myvue函数的返回值。
4.JSON
JSON是一种轻量级的数据交换格式，JSON是js对象的字符串表示法，使用文本表示一个js对象的信息，本质还是一个字符串
- 可以通过HTTP请求获取：
this.$http.get('xxx.json') - require运行时加载：
require(xxx.json) - import编译时输出接口：
import xxx from 'xxx.json'
5.currency
主要作用就是实现货币的过滤方式
6. 双向过滤器
普通过滤器用在一般元素上，数据由Model到View，只可以读；双向过滤器用在表单元素上，数据双向流动，可读可写
不幸的
上面写了很多关于过滤器的内容，但是在Vue3.x中，过滤器已经被移除，官方觉得过滤器需要自定义语法，打破了{{}}中只是js的假设，为了降低学习实现成本，就在新版本中将它移除了。取而代之的是建议使用方法调用或计算属性来代替
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Vue3.x 过滤器demo</title> <script src="../../easy_start/js/vue.js" type="text/javascript" charset="UTF-8"></script> </head> <body> <div id="app"> <p>{{demo}}</p> </div> <script type="text/javascript"> var vm=new Vue({ el:'#app', data:{ data:'aaa' }, computed:{ demo(){ return '过滤器'+this.data } } }) </script> </body> </html> 复制代码
当我们需要注册全局过滤器的时候，就必须使用全局属性才能让它被所有组件使用，并且这个方法只适用于方法，计算属性必须依赖Vue实例所以不能作为全局属性注册。
