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实例所以不能作为全局属性注册。

Vue第五天---Vue过滤器