Vue中filter的使用

来源:互联网 发布:webservice java 实例 编辑:程序博客网 时间:2024/05/22 15:09
转:http://www.runoob.com/try/try.php?filename=vue2-filters-capitalize

1、注册全局过滤器:


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

<script>
Vue.filter("test",function (value) { return value+"-hahhh";});

new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  }
})

 </script>



2、在实例化内部注册


<div id="app">
  {{ message | capitalize }}
</div>
    
<script>
new Vue({
  el: '#app',
  data: {
    message: 'runoob'
  },
  filters: {
    capitalize: function (value) {
      if (!value) return ''
      value = value.toString()
      return value.charAt(0).toUpperCase() + value.slice(1)
    }
  }
})
</script>