概念
过滤器说白了就是格式化文本输出,不会改变原来的值;
全局过滤器
main.js中定义
//全局过滤器
Vue.filter("changeBig",function(str){
//首字母大写
str=str.charAt(0).toUpperCase()+str.substring(1)
return str
})
// 日期加‘-’
import moment from 'moment'
Vue.filter('format',function(val,arg){
if(!val) return;
val = val.toString()
return moment(val).format(arg)
})
<div>{{time | format('YYYY-MM-DD')}}</div>
局部过滤器
filters:{
//把字符串倒过来
reverse(str){
var arr=str.split("").reverse()
return arr.join()
}
}
filters: {
//保留两位小数
numFilter (value) {
return realVal=parseFloat(value).toFixed(2)
}
}
<body>
<div id="app">
{{date | formaDate}}
</div>
</body>
</html>
<script>
var padaDate = function(value){
return value<10?'0'+value:value;
}
new Vue({
el:"#app",
data:{
date:new Date()
},
filters: {
//时间转换
formaDate(valve){
var date = new Date();
var year = date.getFullYear();
var month = padaDate(date.getMonth()+1);
var day = padaDate(date.getDate());
var hours = padaDate(date.getHours());
var minutes = padaDate(date.getMinutes());
var seconds = padaDate(date.getSeconds());
return '现在时间是:'+year+'年'+month+'月'+day+'日'+hours+'时'+minutes+'分'+seconds+'秒';
}
},
})
</script>
3. vue中将时间去掉'-'的方法
//日期时间去横杠
export function FromDatesCancle(StringDate) {
let CanTime = [];
for (let i = 0; i < StringDate.length; i++) {
if (StringDate[i] !== "-") {
CanTime.push(StringDate[i]);
}
}
return CanTime.join('');
}
3.1 vue中将时间加'-'的方法
export function FromDates(StringDate) {
let T = "",
N = "",
Y = "",
R = "";
for (let i = 0; i < StringDate.length; i++) {
N = StringDate.substring(0, 4) + "-";
Y = StringDate.substring(4, 6) + "-";
R = StringDate.substring(6, 8);
T = N + Y + R;
return T;
}
}