day69work-Vue组件

要求：

1.点击标题渲染不同的数据；

2.点击不同标题，底部标题显示不同信息；未选中时，显示’未选中‘

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <link href="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/css/bootstrap.min.css" rel="stylesheet">
    <script src="https://cdn.bootcss.com/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script src="vue/vue.min.js"></script>
    <style>
        .wrap {
            width: 880px;
            height: 240px;
        }

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

        .box {
            width: 200px;
            height: 200px;
            float: left;

        }

        .box img {
            width: 200px;
            height: 240px;
        }
    </style>
</head>
<body>

<div id="app">

    <div class="wrap">
        <h1 @click="choiceH('a')">头像</h1>
        <h1 @click="choiceH('d')">狗头</h1>
        <tag v-for="dog in pics" :dog="dog" @action="actionImg" v-if="choice == 'd'" ></tag>
        <tag v-for="dog in avas" :dog="dog" @action="actionImg" v-else-if="choice == 'a'" ></tag>
    </div>
    <div>  <!--第二题附加-->
        <h2 v-model="h2">{{ h2 }}</h2>
    </div>
</div>

</body>

<script>
    let dogs = [
        {
            img: 'img/dog/dog1.jpg',
            title: '狗1'
        },
        {
            img: 'img/dog/dog2.jpg',
            title: '狗2'
        },
        {
            img: 'img/dog/dog3.jpg',
            title: '狗3'
        },
        {
            img: 'img/dog/dog4.jpg',
            title: '狗4'
        },
    ];

    let avas = [
        {
            img: 'img/ava/111.jpg',
            title: '图1'
        },
        {
            img: 'img/ava/222.jpg',
            title: '图2'
        },
        {
            img: 'img/ava/333.jpg',
            title: '图3'
        },
        {
            img: 'img/ava/444.jpg',
            title: '图4'
        },
    ]

    let tag = {
        props: ['dog',],
        template: `
        <div class="box">
            <img :src="dog.img" @click="clickI(dog.title)">
        </div>
        `,
        data() {
            return {}
        },
        methods:{
            clickI(a){
                this.$emit('action',a)
            }
        }
    };


    new Vue({
        el: '#app',
        data: {
            pics: dogs,
            avas,
            choice: '',
            h2: '未选中'
        },
        components: {
            tag,
        },
        methods: {
            choiceH(choice) {
                if (choice == 'd') {
                    this.pics = dogs;

                    this.h2 = '选中狗头'  // 第二题附加
                } else {
                    this.pics = avas;
                    this.h2 = '选中头像'  // 第二题附加
                }
                this.choice = choice
            },

            actionImg(a){
                this.h2 = a
            }
        }
    })

</script>
</html>

posted on 2019-12-18 21:20  shenblogs  阅读(117)  评论(0)    收藏  举报

导航