首页 > 其他 > 详细

Vue中过滤器的基本使用

时间:2020-08-10 21:44:56      阅读:57      评论:0      收藏:0      [点我收藏+]

标签:nbsp   技术   vue   如果   urn   lac   

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().toString().padStart(2, 0)
        var day = time.getDay().toString().padStart(2, 0)

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

 

技术分享图片

 

Vue中过滤器的基本使用

标签:nbsp   技术   vue   如果   urn   lac   

原文:https://www.cnblogs.com/unlockth/p/13472253.html

(0)
(0)
   
举报
评论 一句话评论(0
© 2014 bubuko.com 版权所有 鲁ICP备09046678号-4
打开技术之扣,分享程序人生!
             

鲁公网安备 37021202000002号