过滤器
自定义过滤器
Vue.filter('过滤器名称', function(value) { // 业务逻辑 });
过滤器的使用
<div>{{msg | upper}}</div> <div>{{msg | upper | lower}}</div> <div :abc="msg | upper">测试</div>
局部过滤器
var vm = new Vue({ el: '#app', data: { msg: '' }, filters: { upper: function(val) { return val.charAt(0).toUpperCase() + val.slice(1); }, lower: function(val) { return val.charAt(0).toLowerCase() + val.slice(1); } } })
带参数的过滤器
<div id="app"> <div>{{date | format('yyyy-mm-dd')}}</div> </div> <script src="../js/vue.js"></script> <script> Vue.filter('format', function(val, arg) { if (arg == 'yyyy-mm-dd') { var rel = ''; rel += val.getFullYear() + '-' + (val.getMonth() + 1) + '-' + val.getDate(); return rel; } }); var vm = new Vue({ el: '#app', data: { date: new Date() } }) </script>