其他分享
首页 > 其他分享> > 5. 过滤器-ref-自定义指令-计算属性

5. 过滤器-ref-自定义指令-计算属性

作者：互联网

目录



1. 过滤器的文档分析

过滤器文档分析

// 在双花括号中
{{message | capitalize}}

// 在 v-bind 中
<div v-bind:id="rawId | formatId"></div>

(1) 全局定义过滤器

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>过滤器</title>
  </head>
  <body>
    <div id="app">
      <p>处理前: {{msg}}</p>
      <!-- 这里写过滤器名字 -->
      <p>处理后: {{msg | toUpper}}</p>
    </div>
    <script src="./vue.js"></script>
    <script>
      // 全局过滤器, 需求: "abc" -> "Abc"; "toUpper" 是我给过滤器取的名
      Vue.filter("toUpper", (v) => {
        return v.charAt(0).toUpperCase() + v.substr(1);
      });
      let vm = new Vue({
        el: "#app",
        data: {
          msg: "hello",
        },
      });
    </script>
  </body>
</html>

(2) 局部过滤器

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>局部过滤器</title>
</head>

<body>
  <div id='app'>
    {{msg | toUpper}}
  </div>

  <script src='./node_modules/vue/dist/vue.js'></script>
  <script>
    const app = new Vue({
      el: '#app',
      data: {
        msg: 'abc'
      },
      // 局部过滤器, 相比于 全局 filter, 它多了 s
      filters: {
        toUpper(v) {
          return v.charAt(0).toUpperCase() + v.substr(1)
        }
      },
    })
  </script>
</body>

</html>

(3) 过滤器的串联与传参

// 过滤器串联
{{被处理的数据 | 过滤器A | 过滤器B}}

下方结果是 $100元，演示了过滤器串联和传参

<!DOCTYPE html>
<html lang='en'>

<head>
  <meta charset='UTF-8'>
  <meta name='viewport' content='width=device-width, initial-scale=1.0'>
  <title>目的: 输出 $100元</title>
</head>

<body>
  <div id='app'>
    <!-- 给 B 过滤器传递了一个参数 -->
    {{msg | A | B('元')}}
  </div>

  <script src='./node_modules/vue/dist/vue.js'></script>
  <script>
    // A 过滤器
    Vue.filter('A', (v) => {
      return '$' + v;
    })
    // B 过滤器, 其中 v 是 '$100'
    Vue.filter('B', (v, k) => {
      return v + k
    })
    const app = new Vue({
      el: '#app',
      data: {
        msg: '100'
      },
    })
  </script>
</body>

</html>

(4) 全局过滤器 + moment 日期格式化插件

日期格式化有个插件叫 moment，网址是：http://momentjs.cn/，下载是 npm install moment -S

在这里插入代码片

标签：Vue,自定义,app,msg,toUpper,过滤器,全局,ref
来源： https://blog.csdn.net/weixin_44092191/article/details/112134067