vue实现简单的过滤器
Posted zeng-zhi
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了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号(湖南省长沙市)
以上是关于vue实现简单的过滤器的主要内容，如果未能解决你的问题，请参考以下文章