"""

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>

        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: 200px;

            height: 240px;

        }

        .box h2 {

            text-align: center;

            font-weight: normal;

            font-size: 20px;

        }

		.box h4 {

		    text-align: center;

		    font-weight: normal;

		    font-size: 10px;

		}

    </style>

</head>

<body>

<div id="app">

	<button type="button" value="电视" @click="f1='televation'">电视</button>

	<button type="button" value="手机" @click="f1='miphone'">手机</button>

	<div>

		<div class="wrap" v-if="f1 == 'televation' ">

		    <local-tag v-for="dog in ad_data.tv" :dog="dog" def="12345" :xyz="dog.title"></local-tag>

		</div>

		<div class="wrap" v-if="f1 == 'miphone' ">

		    <local-tag v-for="dog in ad_data.phone" :dog="dog" def="12345" :xyz="dog.title"></local-tag>

		</div>

	</div>

</div>

</body>

<script src="vue.js"></script>

<script>

    let 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/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 localTag = {

        props: ['dog', 'def', 'xyz'],

        template: `

        <div class="box" @click="fn">

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

            <h2 v-if="count==1">{{ dog.title }}已被选中</h2>

			<h4 v-else>{{ dog.title }}广告未被选中</h4>

            <!--<h3>{{ abc }}</h3>-->

            <!--<h3>{{ def }}</h3>-->

            <!--<h3>{{ xyz }}</h3>-->

        </div>

        `,

        data() {

            return {

                count: 0,

            }

        },

        methods: {

            fn() {

                console.log(this.dog);

                if(this.count == 1){

					this.count = 0

				}

				else{

					this.count = 1

				}

            }

        }

    };

    new Vue({

        el: '#app',

        data: {

            ad_data,

			f1:''

        },

        components: {

            localTag,

        },

    });

</script>

</html>

vue3作业的更多相关文章

  1. Vue3发布半年我不学，摸鱼爽歪歪，哎~就是玩儿

    是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:"直接学 Vue 3 就行了,基础概念是一模一样的." 以上内容源引自最新一期的<程序员>期刊 ...

  2. # Vue3 setup 函数

    Vue3 setup 函数 vue2 和 vue3 开发的区别 首先,目前来说 vue3 发布已经有一段时间了,但是呢,由于还处于优化完善阶段,对于 vue3 开发项目的需求不是很高,主要还是以 vu ...

  3. python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）

    类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...

  4. SQLServer2005创建定时作业任务

    SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...

  5. 使用T-SQL找出执行时间过长的作业

        有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下:   SELECT sj.name , ...

  6. T-SQL检查停止的复制作业代理，并启动

        有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...

  7. Python09作业思路及源码：高级FTP服务器开发（仅供参考）

    高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...

  8. 个人作业week3——代码复审

    1.     软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...

  9. 个人作业-week2：关于微软必应词典的案例分析

    第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...

随机推荐

  1. 考虑以下 Python 代码，如果运行结束，命令行中的运行结果是什么？

    l = [] for i in xrange(10):  l.append({‘num’:i}) print l在考虑以下代码,运行结束后的结果是什么? l = [] a = {‘num’:0} fo ...

  2. javascript-->getElementsByClass

        //通过类名获取元素    //obj->目标元素的上一层元素  cName->目标类名 tagName->目标的标签类型(可缺省)    function getEleme ...

  3. 关于Anaconda3 (64-bit)的一些体验

    最近因为在学习数据分析,所以安装了Anaconda3 (64-bit),最新版,支持py3.7 优点:自带了720个库(官方宣布),自带notebook,spyder.不用自己再去pip各种库了(基本 ...

  4. python基础--面向对象初始

    # 类与对象,类是类别.种类,是面向对象设计中最重要的概念, # 对象是特征与技能的结合体, # 类是一系列对象相似特征与技能的结合体 # 例如:人是一个类,而我本人是一个对象,手,脚,是我的特征, ...

  5. 【神经网络与深度学习】Caffe使用step by step：caffe框架下的基本操作和分析

    caffe虽然已经安装了快一个月了,但是caffe使用进展比较缓慢,果然如刘老师说的那样,搭建起来caffe框架环境比较简单,但是完整的从数据准备->模型训练->调参数->合理结果需 ...

  6. mongodb 数据库操作 -- 》常用命令

    首先需要下载数据库,安装后,找到bin目录,点开bin目录,复制当前路径配置到环境变量中 和bin的同级下,需要建立一个data/db文件夹,该文件夹并不会自动生成,必须手动设置   启动数据库  看 ...

  7. linux whoami 显示当前用户的用户名

    [root@MongoDB ~]# whoami root

  8. start-all.sh启动HDFS，datanode没有启动

    第一次格式化dfs后,启动并使用hadoop,之后如果再次重新执行了格式化(hdfs namenode -format) start-all.sh启动时就会遇到datanode无法启动的问题,通常情况 ...

  9. .Net Core IIS下无Log4Net日志输出，命令行下却有（dotnet运行）

    .Net Core IIS下无Log4Net日志输出,命令行下却有(dotnet运行) 遇到个诡异的问题,项目发布并寄宿到 IIS上后,Log4Net没有日志输出 1.原因分析 这不应该啊,所有的配置 ...

  10. 洛谷 P3388 割点(割顶) 题解

    题面:     割点性质:     节点 u 如果是割点,当且仅当存在 u 的一个子树,子树中没有连向 u 的祖先的边(返祖边).     换句话说,如果对于一个点u,它的子节点是v,如果low[v] ...