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:关于这方面,其实有一些疑问.因为相对于市面上其 ...
随机推荐
- java：Review（J2ee）
1.oracle: 1.1 增:insert into 删:delete from 改:update tablename set 查:select * from 1.2 聚合函数 max,min,av ...
- windows命令行查看&生成项目树
项目写好以后,想要查看项目结构或生成结构树便于后面查看,可以: 1.进入项目所在目录 2.输入tree,回车后显示项目 3.在项目根目录下保存生成的结构树 输入tree > list.txt命令
- Docker 镜像的操作
1. 从docker 镜像仓库获取镜像 docker pull [镜像名] 从 docker hub 中查看版本 获取 特定版本 docker pull centos 7.6.1801 2. ...
- 记一则update 发生enq: TX - row lock contention 的处理方法
根据事后在虚拟机中复现客户现场发生的情况,做一次记录(简化部分过程,原理不变) 客户端1执行update语句 SQL> select * from test; ID NAME --------- ...
- Linux中安装配置KVM虚拟化
KVM 概述: KVM 即 Kernel-based Virtual Machine 基于内核的虚拟机. KVM,是一个开源的系统虚拟化模块,自 Linux 2.6.20 之后集成在 Linux 的各 ...
- awk 命令使用指南
一:awk 的执行流程 (1) 首先执行BEGIN{} 块中的初始化操作 (2) 然后从指定的数据文件中循环读取一个数据行 ( 自动更新 NF.NR.$0.$1....., 等内建变量的值) (3) ...
- MySQL5.6解压版服务无法启动—系统错误1067
记录一下今天被坑了一下午的BUG 就从半个月前说起吧 当时....................................................................... ...
- nodejs实现服务端重定向
nodejs实现服务端重定向:https://www.jianshu.com/p/5a1500fcd713
- Java细节----method和function的区别
面向对象的语言叫方法 面向过程的语言叫函数 在java中没有函数这么一说,只有方法一说.属于概念上的区别. 硬要说区别. Method必须依赖于Object. Function 是独立的,不需要依赖于 ...
- HDU1846 Brave Game 题解
题面 本题是一道有向图博弈问题: 该题便是著名的巴什博弈: 我们可以发现,当n=0的时候后手必胜(设其为P态),n=1~m这几种状态由于先手可以一次全部取完导致先手必胜(设其为N态). 接着当n=m+ ...