vue_03 练习

Posted 2021-03-22 zhangchaocoming

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了vue_03 练习相关的知识，希望对你有一定的参考价值。

1、有以下广告数据（实际数据命名可以略做调整）
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) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

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

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <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: #eee;
            float: left;
            margin: 10px;
        }

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

        .box h2 {
            text-align: center;
            font-weight: normal;
            font-size: 20px;
        }
        .nav, h2 {
            text-align: center;
        }
        .active {
            background-color: pink;
        }
    </style>
</head>
<body>
<div id="app">
    <div class="nav">
        <button @click="page = 'tv'" :class="{active: page === 'tv'}">tv</button>
        <button @click="page = 'phone'" :class="{active: page === 'phone'}">phone</button>
    </div>
    <div class="wrap" v-if="page === 'tv'">
        <tag v-for="tv in ad_data.tv" :ad="tv" :key="tv.title" @action="change_select"></tag>
    </div>
    <!-- v-for指令，需要给循环的标签或组件添加 key 属性，完成缓存的建立 -->
    <div class="wrap" v-else-if="page === 'phone'">
        <tag v-for="phone in ad_data.phone" :ad="phone" :key="phone.title" @action="change_select"></tag>
    </div>
    <h2 class="footer">{{ select_ad }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>

    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/100.jpg', title: 'phone1'},
            {img: 'img/phone/200.jpg', title: 'phone2'},
            {img: 'img/phone/300.jpg', title: 'phone3'},
            {img: 'img/phone/400.jpg', title: 'phone4'},
        ]
    };

    let tag = {
        props: ['ad'],
        template: `
            <div class="box" @click="send_ad(ad)">
                <img :src="ad.img" alt="">
                <h2>{{ ad.title }}</h2>
            </div>
        `,
        methods: {
            send_ad(ad) {
                this.$emit('action', ad);
            }
        }
    };

    new Vue({
        el: '#app',
        data: {
            ad_data,
            page: 'tv',
            select_ad: '未选中'
        },
        components: {
            tag,
        },
        methods: {
            change_select(ad) {
                // this.select_ad = ad.title + '被选中';
                this.select_ad = `${ad.title}被选中`;
            }
        }
    })
</script>
</html>

以上是关于vue_03 练习的主要内容，如果未能解决你的问题，请参考以下文章

vue_03 练习

Vue练习三十：04_03_自动改变方向播放_幻灯片效果

Vue练习六十一：08-03拖拽_bug版

vscode 用户代码片段 vue初始化模板 Snippet #新加入开头注释自动生成文件名开发日期时间等内容

Python练习册第 0013 题：用 Python 写一个爬图片的程序，爬这个链接里的日本妹子图片 :-)，(http://tieba.baidu.com/p/2166231880)(代码片段

VSCode自定义代码片段1——vue主模板