过滤器
概念：Vue.js 允许你自定义过滤器，可被用作一些常见的文本格式化。过滤器可以用在两个地方：mustache 插值和 v-bind 表达式。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示；
在
双花括号中{{ message | change }}
在
v-bind中
<div v-bind:id="rawId | change"></div>
私有过滤器
小案例使用过滤器把小写字母全部转换为大写<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="/npm/vue/dist/vue.js"></script><title>Document</title></head><body><div id="app"><div><input type="text" v-model="content"><p>{{ content | change }}</p><!-- 在开发者工具中查看是否转换 --><p v-bind:words="content | change "></p></div></div><script>var app = new Vue({el:'#app',data:{content:'',},methods:{},// 私有过滤气的使用filters:{change:function (content) {return content.toUpperCase() + '---私有过滤器转换'}}})</script></body></html>
全局过滤器
小案例使用全局过滤器把小写字母全部转换为大写<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="/npm/vue/dist/vue.js"></script><title>Document</title></head><body><div id="app"><div><input type="text" v-model="content"><p>{{ content | change }}</p><!-- 在开发者工具中查看是否转换 --><p v-bind:words="content | change "></p></div></div><script>//全局过滤器的使用Vue.filter('change', function (content) {return content.toUpperCase() + '---全局过滤器转换'});var app = new Vue({el:'#app',data:{content:'',},methods:{}})</script></body></html>
注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！
过滤器函数总接收表达式的值 作为第一个参数。在上述例子中，change过滤器函数将会收到content的值作为第一个参数。
过滤器可以串联：
{{ content | changeA | changeB }}
过滤器是 JavaScript 函数，因此可以接收参数：
{{ content | changeA(‘arg1’, arg2) }}
这里，changeA被定义为接收三个参数的过滤器函数。其中content的值作为第一个参数，普通字符串arg1作为第二个参数，表达式arg2的值作为第三个参数。
案例：使用过滤器来格式化时间
<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta http-equiv="X-UA-Compatible" content="IE=edge"><meta name="viewport" content="width=device-width, initial-scale=1.0"><script src="/npm/vue/dist/vue.js"></script><title>Document</title></head><body><div id="app"><div><p>未格式化时间</p><h3>{{ time }}</h3><hr><p>使用过滤器格式化时间</p><h3>{{ time | timeFormt }}</h3></div></div><script>var app = new Vue({el:'#app',data:{time:new Date()},methods:{},filters:{timeFormt:function (time,pattern='') {var date = new Date(time)var y = date.getFullYear()var m = (date.getMonth() + 1).toString().padStart(2,'0')var d = date.getDate().toString().padStart(2,'0')if (pattern.toLowerCase() === 'yyyy-mm-dd'){return `${y}-${m}-${d} ---`}else {var hh = date.getHours().toString().padStart(2,'0')var mm = date.getMinutes().toString().padStart(2,'0')var ss = date.getSeconds().toString().padStart(2,'0')return `${y}-${m}-${d} ${hh}:${mm}:${ss} --`}}}})</script></body></html>
使用ES6中的字符串新方法 ,来填充字符串；
String.prototype.padStart(maxLength, fillString=’’)
String.prototype.padEnd(maxLength, fillString=’’)
