Vue中过滤器的基本使用

1.概念

　　Vue.js 允许你自定义过滤器，可被用于一些常见的文本格式化。过滤器可以用在两个地方：双花括号插值和 v-bind 表达式 (后者从 2.1.0+ 开始支持)。过滤器应该被添加在 JavaScript 表达式的尾部，由“管道”符号（|）指示。

2.语法

2.1调用过滤器的格式

　　其中 | 表示管道符，管道符前面的为数据，管道符后面的为过滤器，使用过程中数据会传递给过滤器的处理函数，最终将处理的结果返回。

• 插值表达式

<h3>{{ 数据 | 过滤器名称('arg1', 'arg2')) }}</h3>

• v-bind 表达式

<h3 v-text="数据|过滤器名称"></h3>

2.2.定义一个过滤器

　　定义过滤器需要2个关键参数 过滤器名称 和 处理函数。处理函数 用于过滤器的数据处理，函数的第一个参数固定为过滤器调用时传递的数据，后面参数依次为调用过滤器时传递的参数

• 全局过滤器

　　关键字：filter

　　挂载到全局的 Vue 上，Vue 的实例对象都可以使用，如：vm1、vm2......等都可以使用

Vue.filter("过滤器名称", function(data, arg1, arg2){
　　return data+arg1+arg2
})
var vm1 = new Vue({
    el: "#app"
})
var vm2 = new Vue({
    el: "#app"
})

• 私有过滤器

　　关键字：filters

　　挂载到一个 Vue 实例上，只有该 Vue 实例可以使用，如：只有vm实例可以使用

var vm = new Vue({
    el: "#app",
    filters: {
        过滤器名称: function(data, arg1, arg2){
            return data+arg1+arg2
        }
    }
})

　　注意：过滤器的调用采用就近原则，如果 私有过滤器 和全局过滤器 名称一致，优先采用私有过滤器

3.过滤器使用

　　以下将使用全局过滤器展示多个过滤器使用场景。

3.1.全局过滤器

• 无参数过滤器

<div id="app">
  <h3>{{ msg | msgFormat1 }}</h3>
</div>

<script>
  // 1.无参数过滤器
  Vue.filter('msgFormat1', function(data) {
    return data.replace(/今天/g, '明天')
  })
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '今天天气很好，我们今天去购物吧。'
    }
  })
</script>

• 带参数过滤器

<div id="app">
  <h3>{{ msg | msgFormat2('周末') }}</h3>
</div>

<script>
  // 2.带参数过滤器    
  Vue.filter('msgFormat2', function(data, arg) {
    return data.replace(/今天/g, arg)
  })
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '今天天气很好，我们今天去购物吧。'
    }
  })
</script>

• 多个过滤器

<div id="app">
  <h3>{{ msg | msgFormat2('国庆节') | msgFormat3 }}</h3>
</div>

<script>
  // 3.多个过滤器
  Vue.filter('msgFormat3', function(data) {
    return data + '那一定很愉快。'
  })
  var vm = new Vue({
    el: '#app',
    data: {
      msg: '今天天气很好，我们今天去购物吧。'
    }
  })
</script>

3.2.私有过滤器

<div id="app">
  <p>今天的日期是：{{ date | dateFormat }}</p>
</div>

<script>
  var vm = new Vue({
    el: '#app',
    data: {
      date: new Date()
    },
    filters: {
      dateFormat: function (date) {
        var time = new Date(date)
        var year = time.getFullYear()
        var month = (time.getMonth() + 1).toString().padStart(2, 0)
        var day = time.getDay().toString().padStart(2, 0)

        var hours = time.getHours().toString().padStart(2, 0)
        var minutes = time.getMinutes().toString().padStart(2, 0)
        var seconds = time.getSeconds().toString().padStart(2, 0)
        return `${year}-${month}-${day} ${hours}:${minutes}:${seconds}`
      }
    }
  })
</script>

示例代码

转载请注明出处：https://www.cnblogs.com/unlockth/p/13472253.html