day67

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'},
 ]
}

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

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

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

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

        .box img {
            width: 200px;
        }

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 @click="t1">电视</h2>
    <h2 @click="p1">手机</h2>
    <div class="wrap" v-if="t">
        <my-tv v-for="tv in ad_data.tv" :img="tv.img" :title="tv.title"></my-tv>
    </div>
    <hr>
    <div class="wrap" v-if="p">
        <my-phone v-for="ph in ad_data.phone" :img="ph.img" :title="ph.title"></my-phone>
    </div>
</div>
</body>
<script src="vue/vue.min.js"></script>
<script>

    let ad_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.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 myTv = {
        props: ['img', 'title'],
        template: `
        <div class="box">
            <img :src="img" alt="">
            <h3>{{ title }}</h3>
        </div>
        `,

    };

    let myPhone = {
        props: ['img', 'title'],
        template: `
        <div class="box">
            <img :src="img" alt="">
            <h3>{{ title }}</h3>
        </div>
      `,
    };

    new Vue({
        el: '#app',
        data: {
            t: '',
            p: '',
        },
        components: {
            myTv,
            myPhone
        },
        methods: {
            t1() {
                this.t = 1
            },

            p1() {
                this.p = 1
            },

        }
    })
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        body, h2 {
            margin: 0;
        }

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

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

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

        .box img {
            width: 200px;
        }

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
    </style>
</head>
<body>
<div id="app">
    <h2 @click="t1">电视</h2>
    <h2 @click="p1">手机</h2>
    <div class="wrap" v-if="t">
        <my-tv v-for="tv in ad_data.tv" :img="tv.img" :title="tv.title" @tvd="tvd"></my-tv>
    </div>
    <hr>
    <div class="wrap" v-if="p">
        <my-phone v-for="ph in ad_data.phone" :img="ph.img" :title="ph.title" @phd="phd"></my-phone>
    </div>

    <h2 style="text-align: center">{{ h2 }}</h2>
</div>
</body>
<script src="vue/vue.min.js"></script>
<script>

    let ad_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.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 myTv = {
        props: ['img', 'title'],
        template: `
        <div class="box" @click="tt1">
            <img :src="img" alt="">
            <h3>{{ title }}</h3>
        </div>
        `,
        methods: {
            tt1() {
                this.$emit('tvd', this.title)
            }
        }
    };

    let myPhone = {
        props: ['img', 'title'],
        template: `
        <div class="box" @click="phh">
            <img :src="img" alt="">
            <h3>{{ title }}</h3>
        </div>
      `,
        methods: {
            phh() {
                this.$emit('phd', this.title)
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            t: '',
            p: '',
            h2: '未选中任何广告'
        },
        components: {
            myTv,
            myPhone
        },
        methods: {
            t1() {
                this.t = 1
            },

            p1() {
                this.p = 1
            },

            tvd(a) {
                this.h2 = a
            },
            phd(a) {
                this.h2 = a
            }
        }
    })
</script>
</html>

2

posted @ 2019-12-18 22:49  SetCreed  阅读(50)  评论(0编辑  收藏