过滤器

最新推荐文章于 2024-05-15 15:18:29 发布

panda_pan9527

最新推荐文章于 2024-05-15 15:18:29 发布

阅读量262

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/panda_pan9527/article/details/97971254

本文介绍Vue中自定义过滤器的使用方法，包括全局过滤器和局部过滤器的定义，以及如何在模板中使用管道符调用过滤器进行数据格式化。通过案例演示了如何创建一个自定义过滤器来修改图片尺寸。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

自定义过滤器

注意点：
- 是对已有数据进行格式化
- 过滤器也可以传递参数
- 过滤器要使用管道符才能起作用

分类

全局过滤器 Vue.filter(过滤器名称，回调函数)

局部过滤器 filters选项

filters: {
    //过滤器名称： 回调函数
    'dateFilter': ( val,type) => {
          var date = new Date( val )
          return date.getFullYear() + type + ( date.getMonth() + 1 ) +type+ date.getDate()
      }
}

案列：（css样式没有排版）

<!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="../../vue.js"></script>
</head>

<body>
    <div id="app">
        <div v-for="(item,index) in msg.movieList" :key="item.id">
            <img :src="item.img | dataFilter('128.180')">
            <!-- <p> {{item.img.split('w.h').join('128.180')}} </p> -->
            <p> {{item.nm}} </p>
            <p>观众评分： {{item.sc}} </p>
            <p>主演：{{item.star}} </p>
            <p> {{item.showInfo}} </p>
        </div>
    </div>
</body>
<script>
    new Vue({
        el: '#app',
        data: {
            msg: '',
        },
        created() {
            fetch('./data/data.json')
                .then(res => res.json())
                .then(data => {
                    this.msg = data
                })
        }
    })
    Vue.filter('dataFilter', (msg, type) => {
        return msg.split('w.h').join(type)
    })
</script>

</html>

//数据
{
  "coming": [],
  "movieIds": [1211270, 1243361, 1229534, 1189879, 1207254, 1242130, 342903, 1197417, 1218141, 1226558, 1260459, 1211345, 1240397, 1198925, 1205779, 644501, 1212, 1229688, 343133, 1235560, 1219932, 1239282, 1203673, 1234382, 1257417, 414997, 1279689, 1284307, 1234461, 1262593, 1230509, 1229894, 1254277, 1245196, 368109, 345797, 1204720, 338400, 1204589, 1263074, 1243904, 1281596, 1218727, 337625, 1211698, 1238775, 626524, 1207141, 341989, 1206829, 1281297, 1209269, 1225761, 1230126, 557244, 346172, 1285499, 1207065, 1239976, 1213262, 7010, 11956, 10545, 11559, 38488, 502751, 332346, 1227171, 494127, 79204, 641862, 1243301, 1215803, 1278229, 1227693, 1229020, 1261185, 1227456, 1247299, 1263987, 1209068, 1242431],
  "stid": "576591972453269000",
  "stids": [{
    "movieId": 1211270,
    "stid": "576591972453269000_a1211270_c0"
  }, {
    "movieId": 1243361,
    "stid": "576591972453269000_a1243361_c1"
  }, {
    "movieId": 1229534,
    "stid": "576591972453269000_a1229534_c2"
  }, {
    "movieId": 1189879,
    "stid": "576591972453269000_a1189879_c3"
  }, {
    "movieId": 1207254,
    "stid": "576591972453269000_a1207254_c4"
  }, {
    "movieId": 1242130,
    "stid": "576591972453269000_a1242130_c5"
  }, {
    "movieId": 342903,
    "stid": "576591972453269000_a342903_c6"
  }, {
    "movieId": 1197417,
    "stid": "576591972453269000_a1197417_c7"
  }, {
    "movieId": 1218141,
    "stid": "576591972453269000_a1218141_c8"
  }, {
    "movieId": 1226558,
    "stid": "576591972453269000_a1226558_c9"
  }, {
    "movieId": 1260459,
    "stid": "576591972453269000_a1260459_c10"
  }, {
    "movieId": 1211345,
    "stid": "576591972453269000_a1211345_c11"
  }],
  "total": 82,
  "movieList": [{
    "id": 1211270,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/movie/005955214d5b3e50c910d7a511b0cb571445301.jpg",
    "version": "v3d imax",
    "nm": "哪吒之魔童降世",
    "preShow": false,
    "sc": 9.7,
    "globalReleased": true,
    "wish": 166792,
    "star": "吕艳婷,囧森瑟夫,瀚墨",
    "rt": "2019-07-26",
    "showInfo": "今天225家影院放映5166场",
    "showst": 3,
    "wishst": 0
  }, {
    "id": 1243361,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/movie/f75fcb7696d55452e32794b2219700b9840805.jpg",
    "version": "v2d imax",
    "nm": "烈火英雄",
    "preShow": false,
    "sc": 9.6,
    "globalReleased": false,
    "wish": 157627,
    "star": "黄晓明,杜江,谭卓",
    "rt": "2019-08-01",
    "showInfo": "今天28家影院放映31场",
    "showst": 4,
    "wishst": 0
  }, {
    "id": 1229534,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/movie/bb9f75599bfbb2c4cf77ad9abae1b95c1376927.jpg",
    "version": "v2d imax",
    "nm": "银河补习班",
    "preShow": false,
    "sc": 9.5,
    "globalReleased": true,
    "wish": 221884,
    "star": "邓超,白宇,任素汐",
    "rt": "2019-07-18",
    "showInfo": "今天215家影院放映1360场",
    "showst": 3,
    "wishst": 0
  }, {
    "id": 1189879,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/moviemachine/7b9b0725ab5feae642e1fbba9fbb90fe3702078.jpg",
    "version": "v3d imax",
    "nm": "狮子王",
    "preShow": false,
    "sc": 8.9,
    "globalReleased": true,
    "wish": 191819,
    "star": "唐纳德·格洛弗,塞斯·罗根,詹姆斯·厄尔·琼斯",
    "rt": "2019-07-12",
    "showInfo": "今天209家影院放映1135场",
    "showst": 3,
    "wishst": 0
  }, {
    "id": 1207254,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/moviemachine/5ebdf10fdf566bb7eca21ab0df1147f84781238.jpg",
    "version": "",
    "nm": "鼠胆英雄",
    "preShow": false,
    "sc": 0,
    "globalReleased": false,
    "wish": 91744,
    "star": "岳云鹏,佟丽娅,田雨",
    "rt": "2019-08-02",
    "showInfo": "2019-08-02 本周五上映",
    "showst": 4,
    "wishst": 0
  }, {
    "id": 1242130,
    "haspromotionTag": false,
    "img": "http://p1.meituan.net/w.h/movie/4f973b4398dd265824ea164acc630b271264277.jpg",
    "version": "",
    "nm": "古田军号",
    "preShow": false,
    "sc": 0,
    "globalReleased": false,
    "wish": 7873,
    "star": "王仁君,王志飞,刘智扬",
    "rt": "2019-08-01",
    "showInfo": "2019-08-01 本周四上映",
    "showst": 4,
    "wishst": 0
  }, {
    "id": 342903,
    "haspromotionTag": false,
    "img": "http://p1.meituan.net/w.h/movie/5dde9673a97f1e11540dc4c4cc78cbcb3314363.jpg",
    "version": "v3d imax",
    "nm": "上海堡垒",
    "preShow": false,
    "sc": 0,
    "globalReleased": false,
    "wish": 155892,
    "star": "鹿晗,舒淇,石凉",
    "rt": "2019-08-09",
    "showInfo": "2019-08-09 下周五上映",
    "showst": 4,
    "wishst": 0
  }, {
    "id": 1197417,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/movie/4ce0104f223d0df60340f40f01c561391345060.jpg",
    "version": "",
    "nm": "使徒行者2：谍影行动",
    "preShow": true,
    "sc": 0,
    "globalReleased": false,
    "wish": 298350,
    "star": "张家辉,古天乐,吴镇宇",
    "rt": "2019-08-07",
    "showInfo": "2019-08-07 下周三上映",
    "showst": 4,
    "wishst": 0
  }, {
    "id": 1218141,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/movie/8d3efdc44af04c3254fc9e4ad5334ae32660685.jpg",
    "version": "",
    "nm": "扫毒2天地对决",
    "preShow": false,
    "sc": 9,
    "globalReleased": true,
    "wish": 320805,
    "star": "刘德华,古天乐,苗侨伟",
    "rt": "2019-07-05",
    "showInfo": "今天151家影院放映446场",
    "showst": 3,
    "wishst": 0
  }, {
    "id": 1226558,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/movie/1890a564c74d8865750bb1b19b9fc72a1935745.jpg",
    "version": "",
    "nm": "跳舞吧！大象",
    "preShow": false,
    "sc": 7.3,
    "globalReleased": true,
    "wish": 44306,
    "star": "艾伦,金春花,彭杨",
    "rt": "2019-07-26",
    "showInfo": "今天154家影院放映406场",
    "showst": 3,
    "wishst": 0
  }, {
    "id": 1260459,
    "haspromotionTag": false,
    "img": "http://p1.meituan.net/w.h/movie/2d8e1a831dc439410ba90707d58a5b94480532.jpg",
    "version": "v3d",
    "nm": "赛尔号大电影7：疯狂机器城",
    "preShow": false,
    "sc": 0,
    "globalReleased": false,
    "wish": 22807,
    "star": "胡谦,李晔,罗玉婷",
    "rt": "2019-08-02",
    "showInfo": "2019-08-02 本周五上映",
    "showst": 4,
    "wishst": 0
  }, {
    "id": 1211345,
    "haspromotionTag": false,
    "img": "http://p0.meituan.net/w.h/moviemachine/350582b51ae828c837ec00bf8aac2a30548615.jpg",
    "version": "v3d",
    "nm": "爱宠大机密2",
    "preShow": false,
    "sc": 9,
    "globalReleased": true,
    "wish": 104515,
    "star": "帕顿·奥斯瓦尔特,冯绍峰,凯文·哈特",
    "rt": "2019-07-05",
    "showInfo": "今天100家影院放映223场",
    "showst": 3,
    "wishst": 0
  }]
}