vue3作业
"""
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作业的更多相关文章
- Vue3发布半年我不学，摸鱼爽歪歪，哎~就是玩儿
是从 Vue 2 开始学基础还是直接学 Vue 3 ?尤雨溪给出的答案是:"直接学 Vue 3 就行了,基础概念是一模一样的." 以上内容源引自最新一期的<程序员>期刊 ...
- # Vue3 setup 函数
Vue3 setup 函数 vue2 和 vue3 开发的区别 首先,目前来说 vue3 发布已经有一段时间了,但是呢,由于还处于优化完善阶段,对于 vue3 开发项目的需求不是很高,主要还是以 vu ...
- python10作业思路及源码：类Fabric主机管理程序开发（仅供参考）
类Fabric主机管理程序开发 一,作业要求 1, 运行程序列出主机组或者主机列表(已完成) 2,选择指定主机或主机组(已完成) 3,选择主机或主机组传送文件(上传/下载)(已完成) 4,充分使用多线 ...
- SQLServer2005创建定时作业任务
SQLServer定时作业任务:即数据库自动按照定时执行的作业任务,具有周期性不需要人工干预的特点 创建步骤:(使用最高权限的账户登录--sa) 一.启动SQL Server代理(SQL Server ...
- 使用T-SQL找出执行时间过长的作业
有些时候,有些作业遇到问题执行时间过长,因此我写了一个脚本可以根据历史记录,找出执行时间过长的作业,在监控中就可以及时发现这些作业并尽早解决,代码如下: SELECT sj.name , ...
- T-SQL检查停止的复制作业代理，并启动
有时候搭建的复制在作业比较多的时候,会因为某些情况导致代理停止或出错,如果分发代理时间停止稍微过长可能导致复制延期,从而需要从新初始化复制,带来问题.因此我写了一个脚本定期检查处于停止状态的分 ...
- Python09作业思路及源码：高级FTP服务器开发（仅供参考）
高级FTP服务器开发 一,作业要求 高级FTP服务器开发 用户加密认证(完成) 多用户同时登陆(完成) 每个用户有不同家目录且只能访问自己的家目录(完成) 对用户进行磁盘配额,不同用户配额可不同(完成 ...
- 个人作业week3——代码复审
1. 软件工程师的成长 感想 看了这么多博客,收获颇丰.一方面是对大牛们的计算机之路有了一定的了解,另一方面还是态度最重要,或者说用不用功最重要.这些博客里好些都是九几年或者零几年就开始学习编 ...
- 个人作业-week2：关于微软必应词典的案例分析
第一部分 调研,评测 评测基于微软必应词典Android5.2.2客户端,手机型号为MI NOTE LTE,Android版本为6.0.1. 软件bug:关于这方面,其实有一些疑问.因为相对于市面上其 ...
随机推荐
- 【VS开发】利用VS2015的工程文件来复制另外一个工程的配置的使用说明
[VS开发]利用VS2015的工程文件来复制另外一个工程的配置的使用说明 标签:[VS开发] 说明:总是有时候会遇到这样的问题,在一个工程中完成了对某些PKG包的包含,包括头文件和库等都能发现,但是我 ...
- 【VS开发】循序渐进学习使用WINPCAP（一）
winpcap教程 中文教程 http://www.ferrisxu.com/WinPcap/html/index.html 除此之外, WinPcap · Developer Resources下载 ...
- 微信小程序 ----- this.getOpenerEventChannel is not a function
小程序 添加新的功能, 页面跳转后,通过事件的发布订阅,实现 from => to 或者 to=> from 数据传递 1. 跳转到指定页面. 通过 wx.navigateTo() .请参 ...
- swagger生成文档初步使用
在大部分情况下,公司都会要求提供详细的接口文档,对于开发来说,文档有时候在赶进度的情况下,也是一件头疼的事.而swagger的自动生成文档功能,就可以帮助我们减少工作量,对于文档的修改也可以在代码中随 ...
- 优秀编程学习网站&博文记录
记录优秀讲解知识点博客内容,侵删! 编程者学习网站 LearnKu终身编程者的知识社区 自动化测试内容 Python 接口自动化测试 应用开源接口网站:https://httpbin.org/#/St ...
- ubuntu 安装 Anaconda2和3的tips
Anaconda 2 3 安装tips 安装anaconda2 我们要下载Anaconda2-4.3.0-Linux-x86_64.sh安装文件 下载好之后,在文件路径下执行以下命令: bash An ...
- chrome://inspect 白屏BUG解决方案
chrome://inspect 是前端常用的调试工具但是有时候会碰到PC端dev-tools白屏的问题 1.首先我们要处于[科][学]的网络环境 2.在 chrome 中输入chrome://app ...
- centos:mysql主从同步配置(2018)
centos:mysql主从同步配置(2018) https://blog.csdn.net/liubo_2016/article/details/82379115 主服务器:10.1.1.144; ...
- SQL的编写顺序和执行顺序，以及空值处理，别名处理，转义字符处理
SQL即结构化查询语言.也就是用来从数据库中操作数据的.数据总的来说就是增删改查CRUD. 一,sql的分类,大致有四类: 1)DDL : 数据定义语言 create alter drop trunc ...
- 2019-11-29-C#-很少人知道的科技
title author date CreateTime categories C# 很少人知道的科技 lindexi 2019-11-29 10:12:43 +0800 2018-03-16 08: ...