仕事

1、按照上方 知识点总结 模块，总结今天所学知识点；
2、有以下广告数据（实际数据命名可以略做调整）
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) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: calc(200px * 4 + 80px);
            margin: 0 auto;
            user-select: none;
        }
        .box {
            width: 200px;
            height:260px;
            background-color: rgba(10,200,30,0.5);
            border-radius: 10px;
            float: left;
            margin: 10px;
            overflow: hidden;
        }
        .box img {
            height: 160px;
            margin: 0 auto;
            display: block;
        }
        .box p {
            text-align: center;
        }
        .action {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
<div class="wrap">
    <p>
        <button class="{action :role ==='tv'}" @click="show('tv')">点击展示电视</button>
        <button class="{action :role ==='phone'}" @click="show('phone')">点击展示手机</button>
    </p>
    <div v-if="role === 'tv'">
        <tag v-for="(tv,i) in tv" :data="tv" :index="i" @f1="choice"></tag>
    </div>
    <div v-else-if="role === 'phone'">
        <tag v-for="(phone,i) in phone" :data="phone" :index="i" @f1="choice"> </tag>
    </div>
</div>
    <div>
        <h2>{{ msg }}</h2>
    </div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
    let 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'},
    ];

    let phone = [
        {img: 'img/phone/001.jpg', title: 'phone1'},
        {img: 'img/phone/002.jpg', title: 'phone2'},
        {img: 'img/phone/003.jpg', title: 'phone3'},
        {img: 'img/phone/004.jpg', title: 'phone4'},
    ];
    let tag = {
        props:['data','index'],
        template:`
        <div class="box" @click="fn">
        <p>
        <b>{{ data.title}}</b>
</p>
<img :src="data.img" alt="">
</div>
        `,
        methods:{
            fn(){
                this.$emit('f1',this.index);
            }
        }
    };
    new Vue({
        el: '#app',
        data: {
            tv,
            phone,
            role:'tv',
            msg:'未选中任何广告',
        },
        components:{
            tag,
        },
        methods:{
            show(role){
                this.role=role;
            },
            choice(index){
                let obj = this.role ==='tv' ? this.tv :this.phone;
                this.msg = obj ? obj[index]['title']+'被选中' :this.msg;
            },
        }
    });
</script>
</html>

day67test

仕事

おすすめ