求人：

VUEページのレンダリングコンポーネントの操作：

1、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
    tv: [
        {img: 'img/tv/001.png', title: 'tv1'},
        {img: 'img/tv/002.png', title: 'tv2'},
        {img: 'img/tv/003.png', title: 'tv3'},
        {img: 'img/tv/004.png', title: 'tv4'},
    ],
    phone: [
        {img: 'img/phone/001.png', title: 'phone1'},
        {img: 'img/phone/002.png', title: 'phone2'},
        {img: 'img/phone/003.png', title: 'phone3'},
        {img: 'img/phone/004.png', title: 'phone4'},
    ]
}

i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据  (分析： 渲染----》 页面展示！！ ， )
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

2、在第1题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中

コンポーネントのレンダリング：

<style>
        .c1 {
            font-size: 40px;
            margin: 10px auto;
            text-align: center;
        }

        .box {
            width: 300px;
            border-radius: 10px;
            overflow: hidden;
            background-color: #eee;
            float: left;
            margin: 10px;
        }

        .box img {
            width: 300px;
            height: 240px;
        }

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }

        .colo {
            color: red;
        }
        .ccc{
            font-size: 60px;
            margin: 10px auto;
            text-align: center;
        }
        .jjj{
            width: 1200px;
            margin-left:30px;
        }
    </style>
</head>
<body>
<div id="app">

    <local-tag @qq="qq1" @t1="tl1" :def="ttl" :col="cl" :jj="gg"></local-tag>
    <div class="ccc" v-if="gg">{{ gg }}被选中</div>
</div>


<script>
    let localTag = {
        props: ['obj', 'def', 'col', 'jj'],
        template: `
<div>
            <div class="c1">
            <span @click="cll('tv')" :class="{colo: col == 'tv'}">电视</span>
            <span @click="cll('phone')" :class="{colo: col == 'phone'}">手机</span>
            <img class="jjj" src="img/part3.jpg" alt="" v-if="!def">
            </div>

        <div v-for="i in def">
             <div class="box" @click="sp(i.title)">
             <img :src="i.img" alt="">
                <h2 :class="{colo: jj == i.title}">{{ i.title }}</h2>
             </div>
        </div>
       </div>
        `,
        methods: {
            cll(c) {
                this.$emit('t1',c)
            },
            sp(a) {
                this.$emit('qq',a)
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            add_data: {
                tv: [
                    {img: 'img/tv/001.jpg', title: 'tv1'},
                    {img: 'img/tv/002.jpg', title: 'tv2'},
                    {img: 'img/tv/003.jpg', title: 'tv3'},
                    {img: 'img/tv/004.jpg', title: 'tv4'},
                ],
                phone: [
                    {img: 'img/phone/001.png', title: 'phone1'},
                    {img: 'img/phone/002.png', title: 'phone2'},
                    {img: 'img/phone/003.png', title: 'phone3'},
                    {img: 'img/phone/004.png', title: 'phone4'},
                ],
            },

            cl: '',
            ttl: null,
            gg:null,
        },
        methods: {
            tl1(c) {
                this.cl = c;
                this.ttl = this.add_data[c];
                this.gg = ''
            },
            qq1(a){
                this.gg = a
            }
        },
        components: {
            localTag,
        }
    })
</script>

vue_03day

求人：

VUEページのレンダリングコンポーネントの操作：

コンポーネントのレンダリング：

おすすめ