作业：

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. 关于js里的那一堆事件

    分类 事件名 触发描述 一般事件 onclick 鼠标点击事件 ondbclick 鼠标双击事件 onmousedown/up 鼠标按下/松开事件 onmouseover/move/out 鼠标悬浮/ ...

  2. IT兄弟连 HTML5教程 HTML5的基本语法 了解HTML及运行原理

    了解HTML HTML(HyperText Marked Language)即超文本标记语言,是一种用来制作超文本文档的简单标记语言.我们在浏览网页时看到的一些丰富的影像.文字.图片等内容都是通过HT ...

  3. mysql常用命令杂记

    查看版本 mysqladmin -uRootmaster -pRootmaster@777 versionselect version() 查看Log_bin是否开启 show variables l ...

  4. efcore dotnet cli add-migrations update-database

    add-migrations update-database 如何通过dotnet cli调用 dotnet tool install --global dotnet-ef dotnet ef mig ...

  5. python基础(30):黏包、socket的其他方法

    1. 黏包 1.1 黏包现象 让我们基于tcp先制作一个远程执行命令的程序(命令ls -l ; lllllll ; pwd) 同时执行多条命令之后,得到的结果很可能只有一部分,在执行其他命令的时候又接 ...

  6. Python【day 15-2】基本数据类型-dict tuple set

    '''''' ''' 变量的数据类型 int str bool list 5.字典 dict 定义和写法:由{}表示,每个元素是key:value的键值对形式,元素间是逗号隔开 特点: 1.key是可 ...

  7. Android O的通知渠道适配

     在 Android O 以后,Google引入了通知通道的概念,如果目标API大于 Android O ,不直指定通知渠道是不能发送通知的. 这里放一个我写好的通知方法,大家可以适当的改改再用,*当 ...

  8. linux用户管理-用户的基本操作

    目录 linux用户管理-用户的基本操作 用户相关的命令 linux用户管理-用户的基本操作 什么是用户 用户指能够正常登录linux或windows系统 区别 本质都是登录系统的,只不过Linux支 ...

  9. [20190510]快速建立执行脚本.txt

    [20190510]快速建立执行脚本.txt --//上午在测试建立表空间备份时,浪费一点点时间.脚本如下:$ cat d10.sqldrop tablespace t01 including con ...

  10. docker介绍和安装（一）

    虚拟化简介 虚拟化(英语:Virtualization)是一种资源管理技术,是将计算机的各种实体资源,如服务器.网络.内存及存储等,予以抽象.转换后呈现出来,打破实体结构间的不可切割的障碍,使用户可以 ...