Vue.js - Filter
A custom filter
format:
Vue.filter(‘upper’, function (val) {
return val.charAt(0).toUpperCase() + val.slice(1);
});
Filters used:
Interpolation expression:
<div> MES {{|}} Upper </ div>
Properties Binding:
<div: ABC = "MES | Upper"> Test Data </ 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>
Show results:
Second, local filter
- Only can be used in internal components
Usage: In the data write data field rows;
filters: {partial filter
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>
Show results:
