1、filters过滤器
Vue的过滤器的实现参考了linux的shell命令的管道的实现原理，即上一个命令的输出是下一个命令的输入,Vue.js 允许你自定义过滤器，常用来去处理一些常见的数据格式，过滤器可以用在双花括号插值和v-bind(也就是 : )表达式上。
2、filters过滤器过滤后台返回的数据
- 创建本地的json数据文件：
{
"chiefBonus": {},
"coming": [],
"movieIds": [1250676, 1278598, 1319075, 1225503, 1360592, 644174, 1302235, 1297927, 1198179, 1242151, 343034, 1298367, 1302134, 718, 1207687, 247871, 1213261, 1425171, 1336183, 1375624, 1300146, 424008, 343568, 1377099, 1378986, 1320283, 1319, 344264, 1182552, 1353633, 1288304, 1226046, 1355662, 338391, 1378057, 1368864, 1298908, 1256872, 1204322, 1284045, 1327499, 1420977, 1251152, 78631, 79166, 247302, 1197625, 1250700, 688, 361, 1277515, 360, 1368406, 93, 1355789, 47392, 600],
"stid": "576591972453269000",
"movieList": [{
"id": 1250676,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/94bfc893acb9c586f6270eb8ef5096d53124190.jpg",
"version": "",
"nm": "了不起的老爸",
"preShow": false,
"sc": 9.3,
"globalReleased": true,
"wish": 181876,
"star": "王砚辉,张宥浩,龚蓓苾",
"rt": "2021-06-18",
"showInfo": "今天118家影院放映1101场",
"showst": 3,
"wishst": 0
}, {
"id": 1278598,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/cc08f286aea37c3355fb4bb2441aef3f3457731.jpg",
"version": "",
"nm": "你好世界",
"preShow": false,
"sc": 8.9,
"globalReleased": true,
"wish": 199467,
"star": "北村匠海,松坂桃李,滨边美波",
"rt": "2021-06-11",
"showInfo": "今天104家影院放映383场",
"showst": 3,
"wishst": 0
}, {
"id": 1319075,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/2b709fe7f7c2c9b21c6d37b79e41eb5f1849773.jpg",
"version": "",
"nm": "守岛人",
"preShow": false,
"sc": 9.4,
"globalReleased": true,
"wish": 13057,
"star": "刘烨,宫哲,侯勇",
"rt": "2021-06-18",
"showInfo": "今天91家影院放映350场",
"showst": 3,
"wishst": 0
}, {
"id": 1225503,
"haspromotionTag": false,
"img": "http://p0.meituan.net/w.h/movie/49b453507a60d99a9b9d42755950029994987.jpg",
"version": "",
"nm": "比得兔2：逃跑计划",
"preShow": false,
"sc": 9.1,
"globalReleased": true,
"wish": 53317,
"star": "郭麒麟,詹姆斯·柯登,萝丝·拜恩",
"rt": "2021-06-11",
"showInfo": "今天115家影院放映540场",
"showst": 3,
"wishst": 0
}]
}
-
使用axios模拟请求数据（请求本地的json数据）：
在使用axios请求本地的json数据的过程中，需要注意的一点，要将本地的json数据放在public目录下存放
image.png
然后再去使用axios请求
// 请求本地的json数据
axios.get("/jsonData/movie.json").then((res) => {
this.movieList = res.data.movieList;
});
数据请求了之后，数据是渲染了，但与官网的电影的imgUrl格式存在差异，本地的json多了个/w.h，因此需要对imgUrl进行格式处理。
<ul class="list">
<li v-for="item in movieList" :key="item.id" >
<img :src="item.img | filterImage" alt="">
<h5>{{item.nm}}</h5>
</li>
</ul>
data() {
return {
movieList:[]
};
},
filters:{
filterImage(url){
return url.replace('/w.h','')
}
},
mounted() {
// 请求本地的json数据
axios.get("/jsonData/movie.json").then((res) => {
this.movieList = res.data.movieList;
});
},
常用的filter过滤器还用来处理时间的格式。
