美文网首页
filter过滤器的使用

filter过滤器的使用

作者: 张先觉 | 来源:发表于2020-10-03 12:36 被阅读0次

    应用场景:在数据渲染之前,使用filter过滤器,进行二次加工处理。
    注册时,Vue.filter('注册名', 处理方法),例如Vue.filter('my-filter', function (value) { return '返回处理后的值' })
    使用时,例如{{ 3.1415926 | my-filter }}

    # 注册一个保留两位有效数字的过滤器

    |-- src
      |--filters  单独存放过滤器的文件,便于代码的管理和维护
        |-- index.js
        |-- tofixed.js   处理函数
      |--views 
        |-- index.vue 局部注册和使用
      |main.js 全局注册
    
    #tofixed.js  一个文件单独写处理函数,便于管理
    
    export default (value) => {
        return parseFloat(value).toFixed(3);
    };
    
    #index.js  统一导出filter
    
    import tofixed from "./tofixed";
    export { tofixed };
    
    #index.vue 局部注册以及使用
    
    <template>
      <div>
        {{ 3.1415926 | tofixed }}
      </div>
    </template>
    
    <script>
    import { tofixed } from "@/filters/index.js";
    export default {
      filters: {
        tofixed,
      },
    };
    </script>
    
    #main.js 全局注册过滤器
    
    import { tofixed } from "@/filters/index.js";
    Vue.filter("tofixed", tofixed);
    

    相关文章

      网友评论

          本文标题:filter过滤器的使用

          本文链接:https://www.haomeiwen.com/subject/qqrwuktx.html