过滤器

过滤器filter

<!DOCTYPE html>
<html lang="en">
<!-- 过滤器,是一个函数,定义到 filters 节点下，且一定要有return

  如果全局过滤器和私有过滤器名字一致，此时按照“**就近原则**”，调用的是”私有过滤器“ -->

<!-- 过滤器是可以连续调用的,可传参 {{ message | capi| capi1(arg1,arg2)| capi2 }}-->
<!-- 含参数的全局过滤器的定义-->
<!-- Vue.filter('filterA',(msg,arg1,arg2) =>{
          这里是过滤器的代码逻辑
      })  -->

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <div id="app">
    <p>message 的值是：{{ message | capi }}</p>
  </div>

  <div id="app2">
    <p>message 的值是：{{ message | capi }}</p>
  </div>

  <script src="./lib/vue-2.6.12.js"></script>
  <script>

    // 定义全局过滤器.Vue.filter(filter_name,function()) ,要在Vue实例之前
    // 定义全局过滤器,第一个是过滤器的名字要用上' ';,第二个是过滤器的功能
    Vue.filter('capi', function (str) {
      const first = str.charAt(0).toUpperCase()
      const other = str.slice(1)
      return first + other + ' 这是全局过滤器调用的结果'
    })

    const vm = new Vue({
      el: '#app',
      data: {
        message: 'hello vue.js'
      },
      // 这是一个私有过滤器,因为在Vue实例的内部
      filters: {
        // 注意：过滤器函数形参中的 val，永远都是“管道符”前面的那个值
        capi(val) {
          // 字符串的charAt 方法，获取索引值对应的字符,val.charAt(0)即首字母
          // val.charAt(0)
          const first = val.charAt(0).toUpperCase()
          // 字符串的 slice 方法，可以截取字符串，从指定索引往后截取
          const other = val.slice(1)
          // 强调：过滤器中，一定要有一个返回值
          return first + other + ' 这是私有过滤器调用的结果'
        }
      }
    })

    const vm2 = new Vue({
      el: '#app2',
      data: {
        message: 'heima'
      }
    })
  </script>
</body>

</html>
结果
message 的值是：Hello vue.js 这是私有过滤器调用的结果

message 的值是：Heima 这是全局过滤器调用的结果
posted @ 2023-03-21 09:36  Dinesaw  阅读(28)  评论(0)  编辑  收藏  举报