Vue.js - 过滤器
一、自定义过滤器
格式：
Vue.filter(‘upper’, function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
});
过滤器的使用：
插值表达式：
< div>{{mes| upper}}< /div>
属性绑定：
< div :abc=“mes | upper”>测试数据< /div>
<script type="text/javascript">
window.onload = function () {
Vue.filter('upper', function (val) { upper表示过滤器的名字，
return val.charAt(0).toUpperCase() + val.slice(1);
});
var vm = new Vue({
el:'#app',
data:{
mes: ' '
},
methods:{
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="mes">
<div>{{mes| upper}}</div>
</div>
</body>
显示结果：
二、局部过滤器
- 只有在组件内部可以使用
用法：在data数据域下边写；
filters:{ 局部过滤器
upper:function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
<script type="text/javascript">
window.onload = function () {
var vm = new Vue({
el:'#app',
data:{
mes: ''
},
filters:{ 局部过滤器
upper:function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
}
}
})
}
</script>
</head>
<body>
<div id="app">
<input type="text" v-model="mes">
<div>{{mes|upper}}</div>
<div :abc="mes | upper">测试数据</div>
</div>
</body>
显示结果：