nowplaying页面局部css

<style lang="scss" scoped>
    ul {
        li {
            padding: 10px;
            overflow: hidden;
            img {
                float: left;
                width: 100px;
            }
        }
    }
</style>

由效果看，导演是一个数组，数组里面嵌套着对象

 

使用过滤器对数组过滤

<template>
    <div>
        <ul>
            <li v-for="data in datalist" :key="data.filmId" @click="handleChangePage(data)">
                <img :src="data.poster">
                <h3>{{ data.name }}</h3>
                <p>观众评分{{ data.grade }}</p>
                <p>主演: {{ data.actors | actorfilter }}</p>
            </li>
        </ul>
    </div>
</template>

<script>
    import axios from \'axios\'

    import Vue from \'vue\'
    /*
     把[{"name": "管虎", "role": "导演"}, {"name": "张译", "role": "老算盘"}]
     过滤为：\'管虎 张译\'
    */
    Vue.filter(\'actorfilter\', function (data) {
        var newlist = data.map(item => item.name)
        return newlist.join(\' \')
    })

    export default {
        data() {
            return {
                datalist: [],
                total: 0
            }
        },
        mounted() {
            axios({
                url: \'https://m.maizuo.com/gateway?cityId=110100&pageNum=1&pageSize=10&type=1&k=8629683\',
                headers: {
                    \'X-Client-Info\': \'{"a":"3000","ch":"1002","v":"5.0.4","e":"1597564345482951892566017","bc":"110100"}\',
                    \'X-Host\': \'mall.film-ticket.film.list\'
                }
            }).then(res => {
                console.log(res.data)
                this.datalist = res.data.data.films
                this.total = res.data.data.total
            })
        },
    }
</script>

<style lang="scss" scoped>
    ul {
        li {
            padding: 10px;
            overflow: hidden;

            img {
                float: left;
                width: 100px;
            }
        }
    }
</style>