场景引入:
大家有没有这样一种体验,就是后端传过来的数据与前端页面所需要呈现的样式不一样,需要我们前端经过文本转换才行。比如:前端页面在购物车中商品有“已购买”和“未购买”两种情况。但是后端返回的数据却是0和1,0——代表未购买,1——代表已购买。这时前端该如何去实现这样一种转换呢?
在vue项目中可以通过filter过滤器轻松搞定。
filter的使用方法:
一般在v-bind指令和表达式中使用
表达式:{{a|b}},a代表展示的值,b代表过滤器名称。如:<h1>{{id|addZero}}</h1>
id为vue中data需展示的值,而addZero则为过滤器名称。
v-bind:如:<h1 v-bind:id="id|addZero">{{id}}</h1>
1、filter实现vue获取时间戳转换为日期格式:
往往在前端开发中,对于时间,后端一般给前端返回的都是时间戳——因为每一个国家的时间是不一样的。这时前端就需要将后端返回的时间戳转换为日期格式。在vue中可以通过filter来实现。
实现方法:
直接上代码:
1、data中定义数据
data: {
curTime: '1605873931'//时间戳(注意后端返回的是秒还是毫秒)
},
2、定义filters过滤器
filters: {
//时间戳
timeFilter(data) {
var date = new Date(data);
//2020-11-19
var y = date.getFullYear() + '-';
var m = date.getMonth() + 1 + '-';//因为是月从0开始,所以得加1
var d = date.getDate();
return y + m + d;
}
}
3、HTML中展示:
<h1>{{curTime|timeFilter}}</h1>
2、利用filter实现文本省略功能:
文本省略利用css三行代码就可以实现:
overflow: hidden;text-overflow:ellipsis;white-space: nowrap;
学完vue中的filter后才发现,利用filter原来也可以实现上述的效果.
实现方法:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
<script src="js/axios.js"></script>
<script>
window.onload = function () {
new Vue({
el: '#my',
data: {
text: '耗子尾汁,年轻人不讲武德,这样不好',
},
//过滤器
filters: {
textFilter(data) {
let len = data.length;
if (len > 20) {
return data.slice(0, 8) + '...';
}
}
}
})
}
</script>
</head>
<body>
<div id="my">
<h1>{{text|textFilter}}</h1>
</div>
</body>
</html>