filters过滤器

过滤器：对要显示的数据进行特定格式化后再显示（适用于一些简单逻辑的处理)

注册过滤器:

        全局注册：

Vue.filter('mySlice',function(value){
        return value.slice(0,4)
    })

        局部注册：

​
    filters:{
        toUpcase(value) {
          return value ? value.toUpperCase() : ''
        }
    }

​

使用过滤器:{{ xxx│过滤器名}}  或  v-bind:属性= “xxx│过滤器名"

        过滤器也可以接收额外参数、多个过滤器也可以串联2.并没有改变原本的数据，是产生新的对应的数据

1.在插值表达式中使用过滤器

        通过“{{data}}”语法，可以将data中的数据插入页面中，该语法就是插值语法表达式。在插值语法表达式中还可以使用过滤器来对数据进行处理。

        message作为参数传递到toUpcase过滤器中执行，toUpcase将返回的最终结果展示到页面中。符号“I”称为管道符,管道符之前代码的执行结果会传到后面作为参数进行处理。

<div id="app">
    <div>{{message | toUpcase}}</div>
</div>

<script>
  var vm = new vue({
    el: '#app',
    data: {
        message : 'hello'
    },
    filters:{
          //将hello转换为HELLO
        toUpcase(value) {
          return value ? value.toUpperCase() : ''
        }
    }
  })
</script>

  
2.在v-bind属性绑定中使用过滤器

        v-bind用于属性绑定，如“v-bind:id="data"”表示绑定id属性,值为data。在data后面可以加过滤器，语法为“data I filter”。

        id属性通过 v-bind 与data中的 datald绑定，并且通过管道符传递给了formatld 进行处理，formatld()方法需要定义在 filters选项中，chartAt()是字符串处理的方法，参数为索引值，当前获取的是索引为1的字符f，而indexOf()方法的参数为指定字符，当前获取的是字符d所在的索引0。
 

<div id="app">
    <div v-bind:id="datald | formatId">hello</div>
</div>

<script>
  var vm = new vue({
    el: '#app',
    data: {
        dataId: 'df1'
    },
    filters:{
        formatId (value) {
          //字符串处理
          return value ? value.charAt (1) + value.indexOf ('d'): ''
        }
    }
  })
</script>