vue过滤器 · vue

Vue.js 允许你自定义过滤器，**可被用作一些常见的文本格式化**。过滤器可以用在两个地方：**mustache 插值和 v-bind 表达式**。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符指示； ## **1. 私有过滤器** > 私有过滤器只能在当前的vue实例中使用 1. 使用管道符将要格式化的字符，作为第一个参数传入dataFormat过滤器中 ~~~ <td>{{ item.ctime | dataFormat('yyyy-mm-dd')}}</td> ~~~ 2.vue实例中定义过滤器 ~~~ filters: { // 私有局部过滤器，只能在当前 VM 对象所控制的 View 区域进行使用 dataFormat(input, pattern = "") { // 在参数列表中通过 pattern="" 来指定形参默认值，防止报错 alert(input); var dt = new Date(input); // 获取年月日 var y = dt.getFullYear(); var m = (dt.getMonth() + 1).toString().padStart(2, '0'); var d = dt.getDate().toString().padStart(2, '0'); // 如果传递进来的字符串类型，转为小写之后，等于 yyyy-mm-dd，那么就返回年-月-日 // 否则，就返回年-月-日时：分：秒 if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}`; } else { // 获取时分秒 var hh = dt.getHours().toString().padStart(2, '0'); var mm = dt.getMinutes().toString().padStart(2, '0'); var ss = dt.getSeconds().toString().padStart(2, '0'); return `${y}-${m}-${d} ${hh}:${mm}:${ss}`; } } } ~~~ ## 2. 全局过滤器所谓的全局过滤器，就是所有的VM实例都共享的 ~~~ // 全局的过滤器，进行时间的格式化 // 所谓的全局过滤器，就是所有的VM实例都共享的 Vue.filter('dateFormat', function (dateStr, pattern = "") { // 根据给定的时间字符串，得到特定的时间 var dt = new Date(dateStr) // yyyy-mm-dd var y = dt.getFullYear() var m = dt.getMonth() + 1 var d = dt.getDate() // return y + '-' + m + '-' + d if (pattern.toLowerCase() === 'yyyy-mm-dd') { return `${y}-${m}-${d}` } else { var hh = dt.getHours() var mm = dt.getMinutes() var ss = dt.getSeconds() return `${y}-${m}-${d} ${hh}:${mm}:${ss}` } }) ~~~ 注意：当有局部和全局两个名称相同的过滤器时候，会以就近原则进行调用，即：局部过滤器优先于全局过滤器被调用！ ## 案例 ~~~ <body> <div id="app"> <p>{{ msg | msgFormat('疯狂+1', '123') | test }}</p> </div> <script> // 定义一个 Vue 全局的过滤器，名字叫做 msgFormat Vue.filter('msgFormat', function (msg, arg, arg2) { // 字符串的 replace 方法，第一个参数，除了可写一个字符串之外，还可以定义一个正则 return msg.replace(/单纯/g, arg + arg2) }) Vue.filter('test', function (msg) { return msg + '========' }) // 创建 Vue 实例，得到 ViewModel var vm = new Vue({ el: '#app', data: { msg: '曾经，我也是一个单纯的少年，单纯的我，傻傻的问，谁是世界上最单纯的男人' }, methods: {} }); </script> ~~~