电视手机

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        .wrap {
            width: 880px;
            margin: 0 auto;
            user-select: none;
        }

        .box {
            width: 200px;
            border-radius: 10px;
            float: left;
            margin: 10px;
            overflow: hidden;
        }

        .box img {
            height: 180px;
            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: 'phone',
            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>
12.18作业

电视手机

猜你喜欢
