vue过滤器可以在两个场景使用:
1.双花括号内
2.v-bind内
vue过滤器分为本地过滤器和全局过滤器。
本地过滤器使用例子:
<div id="app">
<h1>{{ msg|CaseWrite }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
var vm = new Vue({
el: '#app',
data: {
msg:'abc'
},
filters:{
CaseWrite:function (val) {
return val.toUpperCase()
}
}
})
</script>
如上所示,双花括号中使用本地过滤器的一个大写转小写的使用例子。
全局过滤器使用例子:
<div id="app">
<h1>{{ msg|CaseWrite }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
Vue.filter('CaseWrite',function (val) {
return val.toUpperCase();
})
var vm = new Vue({
el: '#app',
data: {
msg:'abc'
}
})
</script>
如上所示,双花括号中使用全局过滤器的一个大写转小写的使用例子。
注意:全局过滤器需定义在vue实例创建之前。
vue过滤器还可以嵌套使用
以下是一个过滤器A处理msg之后,再传递给过滤器B处理的使用例子
<div id="app">
<h1>{{ msg|CaseWrite|reversal }}</h1>
</div>
</body>
</html>
<script src="vue.js"></script>
<script>
Vue.filter('CaseWrite',function (val) {
return val.toUpperCase()
})
Vue.filter('reversal',function (val) {
return val.split('').reverse().join('');
})
var vm = new Vue({
el: '#app',
data: {
msg:'abc'
}
})
</script>