zoukankan      html  css  js  c++  java
  • Vue2 全局过滤器(vue-cli)

    先看官方简介:

    当前组件注册:

    export default {
      data () {
        return {}
      },
      filters:{
        orderBy (){
          // doSomething
        },
        uppercase () {
          // doSomething
        }
      }
    }

    但是我们做项目来说,大部分的过滤器是要全局使用的,不会每每用到就在组件里面去写,嗯,还是抽成全局的会更好些。

    全局注册:(官网https://cn.vuejs.org/v2/api/#filters

    1 // 注册
    2 Vue.filter('my-filter', function (value) {
    3 // 返回处理后的值
    4 })
    5  
    6 // getter,返回已注册的过滤器
    7 var myFilter = Vue.filter('my-filter')

    当项目所用到的过滤器比较多时,就想试着把所有的方法定义在一个文件里面导出,嗯,毕竟还是有分点层次的。

    /src/common/filters/custom.js

    let dateServer = value => {
      return value.replace(/(d{4})(d{2})(d{2})/g, '$1-$2-$3')
    }
    export { dateServer }

    /src/main.js

    import * as custom from './common/filters/custom'
    
    Object.keys(custom).forEach(key => {
      Vue.filter(key, custom[key])
    })

    然后在其他的.vue 文件中就可愉快地使用这些我们定义好的全局过滤器了

    <template>
      <section class="content">
        <p>{{ time | dateServer }}</p> <!-- 2016-01-01 -->
      </section>
    </template>
    <script>
      export default {
        data () {
          return {
            time: 20160101
          }
        }
      }
    </script>
    ——————分割线:2017年7月18日
    Demo示例请点击这里查看。
     
  • 相关阅读:
    Python与Flask
    Python与MySQL
    range,map,sum
    Java:初始化类、变量、程序块加载解析
    HTML_记录2
    HTML_记录1
    查看当前连接的实例名
    expdp impdp
    行列转换
    oracle创建定时任务
  • 原文地址:https://www.cnblogs.com/xiterjia/p/6701324.html
Copyright © 2011-2022 走看看