1218作业未完善

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style>
        body, h3 {
            margin: 0;
        }

        .wrap {
            width: 880px;
            margin: 0 auto;
        }

        .wrap:after {
            content: '';
            display: block;
            clear: both;
        }

        .box {
            width: 200px;
            height: 250px;
            border-radius: 10px;
            overflow: hidden;
            float: left;
            background-color: cornsilk;
            margin: 10px;
        }

        .box img {
            width: 100%;
            height: 200px;
        }

        h3 {
            text-align: center;
            font-size: 22px;
        }

        .title {
            height: 50px;
        }

        .title span {
            font-size: 20px;
            margin: 150px;
            cursor: pointer;
            color: blue;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="wrap">
        <div class="title">
            <span @click="show = 'tv'">电视</span>
            <span @click="show = 'phone'">手机</span>
        </div>
        <div  v-if="show === 'tv'" >
        <tag1 v-for='(tv,i) in tvs' :tv="tv" :index="i" @adv="actionFn"></tag1>
        </div>
        <div  v-if="show === 'phone'">
        <tag2 v-for='phone in phones' :pho="phone"  :index="i"  @adv="actionFn"></tag2>
        </div>
        <h2>{{ msg }}</h2>
    </div>
</div>


</body>
<script src="js/vue.js"></script>
<script>
    let tvs = [
        {img: 'img/tv/100.jpg', title: 'tv1'},
        {img: 'img/tv/200.jpg', title: 'tv2'},
        {img: 'img/tv/300.jpg', title: 'tv3'},
        {img: 'img/tv/400.jpg', title: 'tv4'},
    ];
    let phones = [
        {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 tag1 = {
        props: ['tv', 'index'],
        template: `
        <div class="box"  @click="getname">
        <img :src="tv.img" alt="">
        <h3>{{ tv.title }}</h3>
    </div>`,

        methods: {
            getname() {
                this.$emit('adv',this.index);
                // console.log(this.index)
            }
        }
    };
    let tag2 = {
        props: ['pho', 'index'],
        template: `
        <div class="box"  @click="getname">
        <img :src="pho.img" alt="">
        <h3>{{ pho.title }}</h3>
    </div>`,
       methods: {
            getname() {
                this.$emit('adv',this.index);
                // console.log(this.index)
            }
        }
    };


    new Vue({
        el: '#app',
        data: {
            tvs,
            phones,
            show: 'tv',
            msg: '未选中任何广告'
        },
        components: {
            tag1,
            tag2
        },
        methods: {
            actionFn(index) {
                // console.log(index);

                 // let obj = this.show === 'tv'? this.tv : this.phone;
                 // console.log(index);
                this.msg = index +'被选中'
            }
        }
    })
</script>
</html>
1218作业 未完善

猜你喜欢
