This article brings you an introduction to the use of vue.filter() in Vue (filtering). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to you.

Vue filter

       
  
 
{{msg |msgFormat}}
 
   

Use Vue.filter() to filter the specified element. The parameter passed in the function is the first value in the el expression,

You can also pass multiple parameters at the same time

       
  
 
{{msg |msgFormat('讨论')}}
 
   

You can filter multiple times at the same time

       
  
 
{{msg |msgFormat('讨论')|test}}
 
   

Instances that are often used in practice

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}` } })

At the same time, if there is Two Vue objects, private filters can be defined for each object, as follows

// 如何自定义一个私有的过滤器（局部） var vm2 = new Vue({ el: '#app2', data: { dt: new Date() }, methods: {}, filters: { // 定义私有过滤器 过滤器有两个 条件 【过滤器名称 和 处理函数】 // 过滤器调用的时候，采用的是就近原则，如果私有过滤器和全局过滤器名称一致了，这时候 优先调用私有过滤器 dateFormat: function (dateStr, pattern = '') { // 根据给定的时间字符串，得到特定的时间 var dt = new Date(dateStr) // yyyy-mm-dd var y = dt.getFullYear() var m = (dt.getMonth() + 1).toString().padStart(2, '0') var d = dt.getDate().toString().padStart(2, '0') 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} ~~~~~~~` } } },

Related recommendations:

Detailed explanation of the use of Vue filters

$.grep() filter function array filtering in jQuery

Detailed example of how to create and use vue custom filters

The above is the detailed content of Introduction to the use of vue.filter() in Vue (filtering). For more information, please follow other related articles on the PHP Chinese website!