本文主要介绍Vue.js中过滤器的使用,与自定义指令类似,过滤器可进行全局定义和局部定义。
1.全局定义过滤器
语法如下:
Vue.filter('upper', function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
});
上例定义了字符串首字符大写的过滤器。
2.局部定义过滤器
语法如下:
new Vue({
el: '#app',
data: {
msg: '',
defined: 'a'
},
filters: {
getLastChar: function(val) {
return val.slice(val.length - 1);
},
getFirstChar: function(val) {
return val.charAt(0);
}
}
})
通过filter属性定义局部过滤器,上面定义了获得字符串最后一个字符和首字符的过滤器。
效果如图:
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- 分为全局过滤器和局部过滤器 -->
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div><input type="text" name="" id="" v-model="msg"></div>
<div> <span v-cloak> {{msg | upper }}</span></div>
<div> <span v-cloak> {{msg | lower }}</span></div>
<div> <span v-cloak> {{msg | upper | getFirstChar}}</span></div>
<div> <span v-cloak> {{msg | getLastChar}}</span></div>
<div> <span :index="defined | upper"></span></div>
</div>
<script src="./vue.min.js"></script>
<script>
Vue.filter('upper', function(val) {
return val.charAt(0).toUpperCase() + val.slice(1);
});
Vue.filter('lower', function(val) {
return val.charAt(0).toLowerCase() + val.slice(1);
});
new Vue({
el: '#app',
data: {
msg: '',
defined: 'a'
},
filters: {
getLastChar: function(val) {
return val.slice(val.length - 1);
},
getFirstChar: function(val) {
return val.charAt(0);
}
}
})
</script>
</body>
</html>
3.带参数过滤器的使用
以时间的格式化为例,介绍带参数过滤器的使用。
格式化前:
格式化后:
通过formTime('yyyy-MM-dd hh:mm:ss')过滤器实现。
代码如下:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<style>
[v-cloak] {
display: none;
}
</style>
</head>
<body>
<div id="app">
<div v-cloak>{{time | formTime('yyyy-MM-dd hh:mm:ss')}}</div>
</div>
<script src="./vue.min.js"></script>
<script>
new Vue({
el: '#app',
data: {
time: new Date()
},
methods: {
},
watch: {},
filters: {
formTime: function(val, para) {
function addZero(e) {
return e < 10 ? '0' + e : e;
}
if (para == 'yyyy-MM-dd hh:mm:ss') {
return val.getFullYear() + '-' + addZero(val.getMonth() + 1) + '-' + addZero(val.getDate()) + ' ' + addZero(val.getHours()) + ':' + addZero(val.getMinutes()) + ':' + addZero(val.getSeconds());
}
}
}
})
</script>
</body>
</html>