vue中filter过滤器在时间戳，文本省略上的使用

最新推荐文章于 2023-04-08 12:52:00 发布

成功总在风雨后

最新推荐文章于 2023-04-08 12:52:00 发布

阅读量519

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_44475148/article/details/109880464

版权

vue 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

场景引入：

大家有没有这样一种体验，就是后端传过来的数据与前端页面所需要呈现的样式不一样，需要我们前端经过文本转换才行。比如：前端页面在购物车中商品有“已购买”和“未购买”两种情况。但是后端返回的数据却是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>

实现效果：

在这里插入图片描述

成功总在风雨后

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
vue中filter过滤器在时间戳，文本省略上的使用

场景引入：大家有没有这样一种体验，就是后端传过来的数据与前端页面所需要呈现的样式不一样，需要我们前端经过文本转换才行。比如：前端页面在购物车中商品有“已购买”和“未购买”两种情况。但是后端返回的数据却是0和1，0——代表未购买，1——代表已购买。这时前端该如何去实现这样一种转换呢？在vue项目中可以通过filter过滤器轻松搞定。filter的使用方法：一般在v-bind指令和表达式中使用表达式：{{a|b}}，a代表展示的值，b代表过滤器名称。如：<h1>{{id|addZero
复制链接

扫一扫