Vue入门讲解day06-过滤器（filters）

最新推荐文章于 2024-07-18 22:25:03 发布

进阶的前端工作者

最新推荐文章于 2024-07-18 22:25:03 发布

阅读量108

点赞数

分类专栏： vue入门文章标签： css javascript vue.js

本文链接：https://blog.csdn.net/weixin_45846177/article/details/103804059

版权

vue入门专栏收录该内容

11 篇文章 0 订阅

订阅专栏

过滤器（filters）

用过滤器的功能实现简单的评分，代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="../js/vue.js"></script>
    <style>
        .source-box{
            width: 300px;
            height: 50px;
            display: flex;
            justify-content: space-between;
        }
        .open{
            width: 30px;
            height: 30px;
            background-color: blue;
        }
        .close{
            width: 30px;
            height: 30px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="app">
        <div class="source-box" v-for="(item, indexs) in services">
            <div>{{ item.title }}</div>
            <div class="star-box" v-for="c in 5" :class="item.source | starClass(c)"></div>
            <div>{{ item.source }}</div>
        </div>
    </div>
</body>
<script>
    new Vue({
        el:'#app',
        data:{
            services:[
                {
                    title:'商品1',
                    source:3.6
                },
                {
                    title:'商品2',
                    source:4.3
                },
                {
                    title:'商品3',
                    source:2.7
                },
            ]
        },
        filters:{
            starClass(target,c){
                return Math.round(target) > c ? 'open' : 'close';
            }
        }
    })
</script>
</html>

在这里插入图片描述

上述小方块，可以换成小图标，这边只是为了方便展示，所以就用了小方块来代替星星图标。
过滤器，可以传值，可以不传值，代码中的target代表的就是过滤对象本身，c代表你传的值，target无论你传不传都有。

进阶的前端工作者

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
Vue入门讲解day06-过滤器（filters）

过滤器（filters）用过滤器的功能实现简单的评分，代码如下：<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1...
复制链接

扫一扫