作业：

vue组件操作页面渲染：

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被选中

组件渲染：

<style>

        .c1 {

            font-size: 40px;

            margin: 10px auto;

            text-align: center;

        }

        .box {

            width: 300px;

            border-radius: 10px;

            overflow: hidden;

            background-color: #eee;

            float: left;

            margin: 10px;

        }

        .box img {

            width: 300px;

            height: 240px;

        }

        .box h2 {

            text-align: center;

            font-weight: normal;

            font-size: 20px;

        }

        .colo {

            color: red;

        }

        .ccc{

            font-size: 60px;

            margin: 10px auto;

            text-align: center;

        }

        .jjj{

            width: 1200px;

            margin-left:30px;

        }

    </style>

</head>

<body>

<div id="app">

    <local-tag @qq="qq1" @t1="tl1" :def="ttl" :col="cl" :jj="gg"></local-tag>

    <div class="ccc" v-if="gg">{{ gg }}被选中</div>

</div>

<script>

    let localTag = {

        props: ['obj', 'def', 'col', 'jj'],

        template: `

<div>

            <div class="c1">

            <span @click="cll('tv')" :class="{colo: col == 'tv'}">电视</span>

            <span @click="cll('phone')" :class="{colo: col == 'phone'}">手机</span>

            <img class="jjj" src="img/part3.jpg" alt="" v-if="!def">

            </div>

        <div v-for="i in def">

             <div class="box" @click="sp(i.title)">

             <img :src="i.img" alt="">

                <h2 :class="{colo: jj == i.title}">{{ i.title }}</h2>

             </div>

        </div>

       </div>

        `,

        methods: {

            cll(c) {

                this.$emit('t1',c)

            },

            sp(a) {

                this.$emit('qq',a)

            }

        }

    };

    new Vue({

        el: '#app',

        data: {

            add_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.png', title: 'phone1'},

                    {img: 'img/phone/002.png', title: 'phone2'},

                    {img: 'img/phone/003.png', title: 'phone3'},

                    {img: 'img/phone/004.png', title: 'phone4'},

                ],

            },

            cl: '',

            ttl: null,

            gg:null,

        },

        methods: {

            tl1(c) {

                this.cl = c;

                this.ttl = this.add_data[c];

                this.gg = ''

            },

            qq1(a){

                this.gg = a

            }

        },

        components: {

            localTag,

        }

    })

</script>

vue_03day的更多相关文章

随机推荐

  1. React中添加注释

    React中的注释,其实确切来讲是jsx中的注释: {/*单行注释*/} {/* 多 行 注 释 */}

  2. A1060 Are They Equal (25 分)

    一.技术总结 cnta.cntb用于记录小数点出现的位置下标,初始化为strlen(字符串)长度. q.p用于记录第一个非0(非小数点)出现的下标,可以用于计算次方和方便统计输出的字符串,考虑到前面可 ...

  3. 阿里Nacos初体验

    Nacos 从开源到现在已经18个releases了,更新很快,社区也很活跃,光钉钉群的人数那也是好多,每次点个查看全部成员的按钮,我的钉钉就要卡死,也有可能我没更新最新的版本. 前面写了一段时间的S ...

  4. 一文学会 TypeScript 的 82% 常用知识点（上）

    前端专栏 2019-11-22 19:17:55 对于前端从业者来说,TypeScript(以下简称 TS)已经不算是新技术. Vue3 的源码基于 TS 编写, Angular 项目默认支持 TS ...

  5. 10-Django中间件

    中间件 Django中的中间件是一个轻量级.底层的插件系统,可以介入Django的请求和响应处理过程,修改Django的输入和输出. 中间件的设计为开发者提供了一种无侵入式的开发方式,增强了Djang ...

  6. Linux常用命令之网络命令

    write命令 write命令用于向指定登录用户终端上发送信息.通过write命令可传递信息给另一位登入系统的用户,当输入完毕后,键入EOF表示信息结束,write命令就会将信息传给对方.如果接收信息 ...

  7. redis设置、查看和校验密码

    Redis没有实现访问控制这个功能,但是它提供了一个轻量级的认证方式(密码),可以通过编辑[redis.conf]配置文件来启用认证,这里简单介绍一下Redis中如何设置.查看和校验密码(登录验证和操 ...

  8. MySQL EXPLAIN 语句

    对于 MySQL 在执行时来说,EXPLAIN 功能上与 DESCRIBE 一样.实际运用中,后者多用来获取表的信息,而前者多用于展示 MySQL 会如何执行 SQL 语句(Obtaining Exe ...

  9. Spring Security 教程 大牛的教程

    https://www.iteye.com/blog/elim-2247073 Spring Security 教程 Spring Security(20)——整合Cas Spring Securit ...

  10. 用Python进行数据清洗，这7种方法你一定要掌握

    前言 文的文字及图片来源于网络,仅供学习.交流使用,不具有任何商业用途,版权归原作者所有,如有问题请及时联系我们以作处理. 作者 | 常国珍.赵仁乾.张秋剑 来源 |<Python数据科学:技术 ...