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:关于这方面,其实有一些疑问.因为相对于市面上其 ...
随机推荐
- UniEAP V4 WorkShop用户手册
版权声明<UniEAP V4 WorkShop用户手册>的版权归东软集团(大连)有限公司所有.未经东软集团(大连)有限公司的书面准许,不得将本手册的任何部分以任何形式.采用任何手段(电子的 ...
- pytest -- 测试的参数化
目录 1. @pytest.mark.parametrize标记 1.1. empty_parameter_set_mark选项 1.2. 多个标记组合 1.3. 标记测试模块 2. pytest_g ...
- C#学习笔记三（委托·lambda表达式和事件，字符串和正则表达式，集合，特殊的集合）
委托和事件的区别 序号 区别 委托 事件 1 是否可以使用=来赋值 是 否 2 是否可以在类外部进行调用 是 否 3 是否是一个类型 是 否,事件修饰的是一个对象 public delegate vo ...
- Mac_Navicat Premium连接MySQL错误2059 - Authentication plugin 'caching_sha2_password' cannot be loaded: dlopen(../Frameworks/caching_sha2_password.so, 2): image not found
mac下MySql启动连接报错:Authentication plugin ‘caching_sha2_password’ cannot be loaded: dlopen(/usr/local/my ...
- python_面试题_TCP的三次握手与四次挥手问题
1.相关问题 问题1: 请详细描述三次握手和四次挥手的过程,并画出状态图 问题2: 四次挥手中TIME_WAIT状态存在的目的是什么? 问题3: TCP是通过什么机制保障可靠性的? 2.问题回答 问题 ...
- 【Deep Learning Nanodegree Foundation笔记】第 5 课：Logistic Regression
Learn about linear regression and logistic regression models. These simple machine learning models a ...
- PostgreSQL逻辑复制到kafka-实践
kafka 安装 wget http://mirror.bit.edu.cn/apache/kafka/2.3.0/kafka_2.12-2.3.0.tgz cp kafka_2.12-2.0.1.t ...
- <<C++ Primer>> 第三章 字符串, 向量和数组 术语表
术语表 第 3 章 字符串, 向量和数组 begin: 是 string 和 vector 的成员,返回指向第一个元素的迭代器.也是一个标准库函数,输入一个数字,返回指向该数字首元素的指针. 缓 ...
- centos7下安装composer和git
一.安装composer composer 属于php的包依赖管理工具. 1.进入Composer国内镜像网站文档页查看安装方法: https://docs.phpcomposer.com/00-in ...
- 从头到尾说一次 Java 垃圾回收，写得非常好！ （转）
之前上学的时候有这个一个梗,说在食堂里吃饭,吃完把餐盘端走清理的,是 C++ 程序员,吃完直接就走的,是 Java 程序员.