vue实现简单的过滤器

html片段：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p>{{ message | capitalize}}</p>
</div>

js片段：

全局过滤器：

Vue.filter('capitalize', function (data) {
  let arr = data.split('/');
  return arr[2] + '(' + arr[0] + arr[1] + ')';
})
new Vue({
  el: '#app',
  data: {
    message: '湖南省/长沙市/岳麓区岳麓大道588号'
  }
  
})

组件本地过滤：

new Vue({
  el: '#app',
  data: {
    message: '湖南省/长沙市/岳麓区岳麓大道588号'
  },
  filters:{
      capitalize: (data) => {
        let arr = data.split('/');
          return arr[2] + '(' + arr[0] + arr[1] + ')';
    }
  }
  
})

 

结果：

岳麓区岳麓大道588号(湖南省长沙市)

///括号变红色

html：

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <p><span>{{ message | district}}</span><font color="red">{{ message | city}}</font></p>
</div>

js：

new Vue({
  el: '#app',
  data: {
    message: '湖南省/长沙市/岳麓区岳麓大道588号'
  },
  filters:{
      district: (data) => {
        let arr = data.split('/');
          let str = arr[2];
      return str;
    },
    city: (data) => {
        let arr = data.split('/');
          let str = '(' + arr[0] + arr[1] + ')'
      return str;
    }
  }
  
})

效果：