19 过滤器
功能：对要显示的数据进行特定格式化后再显示
注意：并没有改变原本的数据，是产生新的对应的数据
声明：过滤器不是必须要用到的东西，而是vue提供处理数据的方式而已，想用就用，不想用可以使用计算属性或者methods编写即可
使用场景：只能配合插值语法或者v-bind使用！
19.1 编写案例
通过编写案例去理解过滤器
案例内容大概是这样的：获取当前时间戳，通过过滤器转化为当前时间
接下来要做的就是把时间戳进行转换,如何进行日期转化呢？
19.2 使用第三方库
这里推荐使用第三方库去实现，我们可以去BootCDN里面找一些第三方库，这里我推荐day.js,它是一个轻量级的，更加方便
点开day.js,就可以看到各个版本，可以下载资源或在线引用
在线引用
如果有网的情况下，可以使用在线引用
点击复制 <script> 标签
然后把引入复制在代码里面
<!-- 在线引入day.js --> <script src="https://cdn.bootcdn.net/ajax/libs/dayjs/1.11.6/dayjs.min.js"></script>
按着ctrl键点击链接如果可以打开这个界面，表示引用成功
下载引用
如果没有网，可以把js下载下来，放到项目里面，在需要用的地方引入js即可
点击复制链接
在浏览器打开链接，右键下载(另存为)
建议下载到项目目录
直接在用到的时候写绝对路径引入js即可
我这里使用的是下载引用的方式做演示
19.3 computed计算属性实现
首先使用computed计算属性的方式实现例子，这里有个bug，不知道是不是我写法的问题
如果我直接返回结果，就对不上时间
转为的时间是错误的
如果我用变量做中转再返回就可以了
19.4 methods方法实现
和计算属性差不多
19.5 filter过滤器实现
vue的过滤器使用起来也很方便，想要展示哪个属性就展示哪个属性，不过对语法有一些要求
一般的格式是：xxx 空格 | 空格 (管道符) 过滤器名称，然后在vue里面配置filter,它和methods是一样的结果，里面就是过滤器名称，一般是一个函数
<h3>现在是:{{time | timeFormater}}</h3>
time 实际上就是timeFormater函数的参数，由vue帮我们执行解析,然后由结果代替整个插值语法由页面解析
19.6 过滤器传参
如果有一天，多个地方使用过滤器，而且需要传递参数，那么可以这么写
19.7 多个过滤器串联使用
多个过滤器直接是可以串联的，使用 |(管道符)xxx拼接即可
比如我要转化后截取当前年，就可以这么写
19.8 全局过滤器
现在写的filter过滤器，都是局部的，只能在vm中使用，但是如果有组件，比如组件A写了一个filterA过滤器，组件B写了一个filterB过滤器，那么组件B就不能使用filterA，当然组件A也不能使用filterB，如何解决这个问题呢，就要使用全局过滤器
通过例子验证说明局部过滤器，现在再写一个div容器创建一个vue实例
现在我觉得msg的内容太长了，想调用截取过滤器
看到报错了，说不能找到过滤器mySlice，强有力的证明了局部过滤器的局限性
如果想开启全局的过滤器配置，可以使用命令
// 注册全局过滤器 注意：vue中过滤器是filters,在这里是filter //需要先准备过滤器再创建实例，顺序不能错 Vue.filter('mySlice',function(value){ return value.slice(0,4) })
查看页面，使用过滤器成功
19.9 v-bind使用过滤器
过滤器不止是只能写在插值语法里面的，还可以写在v-bind，但是通常这些写法比较少，下面一起看下把
比如这个例子，很明显有多余的字符，我就可以使用过滤器截取
查看页面，截取到了
只能配合插值语法或者v-bind使用！使用v-model会报错的！这里就不演示了
19.10 总结
过滤器
定义：对要显示的数据进行特定格式化后再显示(适用于一些简单逻辑的处理，过于复杂的可以使用计算属性)
- 语法：
- 1：注册过滤器，Vue.filter(name,callback)或new Vue(filters:{})
- 2：使用过滤器：{{xxx | 过滤器名称}}或v-bind:属性="xxx" | 过滤器名称
- 备注：
- 1：过滤器也可以接收额外参数，多个过滤器之间可以配合使用
- 2：并没有改变原来的数据，是产生新的对应的数据
