1. 程式人生 > >vue實現簡單的過濾器

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號(湖南省長沙市)