789. 数的范围

Posted tomori

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了789. 数的范围相关的知识,希望对你有一定的参考价值。

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>

 

技术图片

 

以上是关于789. 数的范围的主要内容,如果未能解决你的问题,请参考以下文章

789. 数的范围

AcWing 789. 数的范围

AcWing 789. 数的范围 二分+模板

789. 数的范围

算法789. 数的范围——二分

数的范围