vue_03 练习
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被选中
<!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: 100%;
height: 240px;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
.nav, h2 {
text-align: center;
}
.active {
background-color: pink;
}
</style>
</head>
<body>
<div id="app">
<div class="nav">
<button @click="page = 'tv'" :class="{active: page === 'tv'}">tv</button>
<button @click="page = 'phone'" :class="{active: page === 'phone'}">phone</button>
</div>
<div class="wrap" v-if="page === 'tv'">
<tag v-for="tv in ad_data.tv" :ad="tv" :key="tv.title" @action="change_select"></tag>
</div>
<!-- v-for指令，需要给循环的标签或组件添加 key 属性，完成缓存的建立 -->
<div class="wrap" v-else-if="page === 'phone'">
<tag v-for="phone in ad_data.phone" :ad="phone" :key="phone.title" @action="change_select"></tag>
</div>
<h2 class="footer">{{ select_ad }}</h2>
</div>
</body>
<script src="js/vue.js"></script>
<script>
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/100.jpg', title: 'phone1'},
{img: 'img/phone/200.jpg', title: 'phone2'},
{img: 'img/phone/300.jpg', title: 'phone3'},
{img: 'img/phone/400.jpg', title: 'phone4'},
]
};
let tag = {
props: ['ad'],
template: `
<div class="box" @click="send_ad(ad)">
<img :src="ad.img" alt="">
<h2>{{ ad.title }}</h2>
</div>
`,
methods: {
send_ad(ad) {
this.$emit('action', ad);
}
}
};
new Vue({
el: '#app',
data: {
ad_data,
page: 'tv',
select_ad: '未选中'
},
components: {
tag,
},
methods: {
change_select(ad) {
// this.select_ad = ad.title + '被选中';
this.select_ad = `${ad.title}被选中`;
}
}
})
</script>
</html>
vue_03 练习的更多相关文章
- vue_03总结
vue_03总结 1.组件: html.css.js的集合体 vue实例就代表组件 组件用template实例成员管理html结构,有且只有一个根标签 子组件可以复用,所以数据要组件化处理,data的 ...
随机推荐
- mysql的binlog安全删除的一种方法
指定过期天数(expire_logs_days) ---适用于单机版mysql! 该参数为全局可动态调整参数,默认值为0,即关闭,取值范围0-99. 1.3.1 参数的查看: mysql> ...
- Comet OJ Contest #15 D. 双十一特惠（困难版）
以 $d(x)$ 表示正整数 $x$ 的十进制表示的数位之和.熟知下列关于 $d(x)$ 的结论: $d(x) \equiv x \pmod{9}$.从而对于任意正整数列 $a_1, a_2, \do ...
- 剑指offer40：一个整型数组里除了两个数字之外，其他的数字都出现了两次。请写程序找出这两个只出现一次的数字
1 题目描述 一个整型数组里除了两个数字之外,其他的数字都出现了两次.请写程序找出这两个只出现一次的数字. 2 思路和方法 (1)异或:除了有两个数字只出现了一次,其他数字都出现了两次.异或运算中,任 ...
- python — mysql基础知识
目录 1 . 数据库的介绍 2. mysql 1 . 数据库的介绍 1.为什么要用数据库? 很多功能如果只是通过操作文件来改变数据是非常繁琐的,程序员需要做很多事情 对于多台机器或者多个进程操作用一份 ...
- Ubuntu使用Shadow socks-qt5
由于大多数朋友都问我在Ubuntu上面怎么kexueshangwang,为了防止以后忘记,故此记录. 本教程使用的配置 Ubuntu 16.10Shadowsocks-qt5一个可用的ss账号一根能够 ...
- ubuntu+nginx+uwsgi部署django web项目
前言 将本地开发的django项目部署至linux上的uwsgi服务器,并配置nginx,完成基于ubuntu+nginx+uwsgi的上线运行.下面整理相关步骤. 服务器配置virtualenv 如 ...
- linux 目录结构及VIM
目录结构及VIM 文件系统 说明: 文件系统就是操作管理存储设备或分区上的文件的方法和数据结构,也就是存储设备上组织文件的方式. 操作系统中负责管理和存储文件信息的软件机构叫文件管理系统,简称为文件系 ...
- css三大特性及权重说明
一.三大特性简述 层叠性: 后来的覆盖前面的 (长江后浪推前浪) 继承性: 子标签会继承父标签的某些样式 (跟文字有关的一般都会继承) 优先级: 设计到一个算法“css特殊性(Specificity) ...
- merge into 笔记
1 IF EXISTS (SELECT 1 FROM sys.types t join sys.schemas s on t.schema_id=s.schema_id ...
- datagrid如何获取选中行的索引
//datagrid获取选中行 var row =baseSelectgrid.datagrid('getSelected'); // 获取被选中行的索引 index var index=baseSe ...