作业

1、按照上方 知识点总结 模块，总结今天所学知识点；

2、有以下广告数据（实际数据命名可以略做调整）

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) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）

3、在第2题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）

i）当没有点击任何广告，h2 标签显示：未选中任何广告

ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中

<!DOCTYPE html>

<html lang="zh">

<head>

    <meta charset="UTF-8">

    <title></title>

    <style>

        .wrap {

            width: calc(200px * 4 + 80px);

            margin: 0 auto;

            user-select: none;

        }

        .box {

            width: 200px;

            height:260px;

            background-color: rgba(10,200,30,0.5);

            border-radius: 10px;

            float: left;

            margin: 10px;

            overflow: hidden;

        }

        .box img {

            height: 160px;

            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:'tv',

            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>

巴特西

day67test

作业

最新文章

热门文章