Vue小练习 03
"""
1、有以下广告数据（实际数据命名可以略做调整）
ad_data = {
tv: [
{img: 'img/tv/tv1.jpg', title: 'tv1'},
{img: 'img/tv/tv2.jpg', title: 'tv2'},
{img: 'img/tv/tv3.jpg', title: 'tv3'},
{img: 'img/tv/tv4.jpg', title: 'tv4'},
],
phone: [
{img: 'img/phone/phone1.jpg', title: 'phone1'},
{img: 'img/phone/phone2.jpg', title: 'phone2'},
{img: 'img/phone/phone3.jpg', title: 'phone3'},
{img: 'img/phone/phone4.jpg', title: 'phone4'},
]
}
i) 有两个大标题，电视和手机，点击对应的标题，渲染对应的数据
ii) 一个字典作为一个显示单位，定义一个子组件进行渲染（涉及父子组件传参）
2、在第1题基础上，页面最下方有一个 h2 标签，用来渲染用户当前选择的广告（点击哪个广告就是选中哪个广告）
i）当没有点击任何广告，h2 标签显示：未选中任何广告
ii）当点击其中一个广告，如tv1，h2 标签显示：tv1被选中
"""
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业1</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: grey;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
.box h2 {
text-align: center;
font-weight: normal;
font-size: 20%;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div class="wrap">
<button @click="ad_arr = ad_data.tv">电视</button>
<button @click="ad_arr = ad_data.phone">手机</button>
<local-tag v-for="ad in ad_arr" :ad="ad"></local-tag>
</div>
</div>
<script src="vue/vue.js"></script>
<script>
let localTag = {
props: ['ad'],
template: `
<div class="box">
<img :src="ad.img" alt="">
<h2>{{ ad.title }}</h2>
</div>
`
};
ad_data = {
tv: [
{img: 'img/tv/tv1.jpg', title: 'tv1'},
{img: 'img/tv/tv2.jpg', title: 'tv2'},
{img: 'img/tv/tv3.jpg', title: 'tv3'},
{img: 'img/tv/tv4.jpg', title: 'tv4'},
],
phone: [
{img: 'img/phone/phone1.jpg', title: 'phone1'},
{img: 'img/phone/phone2.jpg', title: 'phone2'},
{img: 'img/phone/phone3.jpg', title: 'phone3'},
{img: 'img/phone/phone4.jpg', title: 'phone4'},
]
};
new Vue({
el: '#d1',
data: {
ad_data,
ad_arr: '',
},
components: {
localTag
},
})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>作业2</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: grey;
float: left;
margin: 10px;
}
.box img {
width: 100%;
}
h2 {
text-align: center;
font-weight: normal;
font-size: 20px;
}
button {
margin: 10px;
}
</style>
</head>
<body>
<div id="d1">
<div class="wrap">
<p>
<button @click="ad_arr=ad_data.tv; v1='当前未选择任何商品'">电视</button>
<button @click="ad_arr=ad_data.phone; v1='当前未选择任何商品'">手机</button>
</p>
<local-tag v-for="ad in ad_arr" :ad="ad" @action="actionFn"></local-tag>
</div>
<h2>{{ v1 }}</h2>
</div>
<script src="vue/vue.js"></script>
<script>
let localTag = {
props: ['ad'],
template: `
<div class="box" @click="clickFn">
<img :src="ad.img" alt="">
<h2>{{ ad.title }}</h2>
</div>
`,
data() {
return {
ad_title: '',
}
},
methods: {
clickFn() {
this.$emit('action', this.ad.title)
}
}
};
ad_data = {
tv: [
{img: 'img/tv/tv1.jpg', title: 'tv1'},
{img: 'img/tv/tv2.jpg', title: 'tv2'},
{img: 'img/tv/tv3.jpg', title: 'tv3'},
{img: 'img/tv/tv4.jpg', title: 'tv4'},
],
phone: [
{img: 'img/phone/phone1.jpg', title: 'phone1'},
{img: 'img/phone/phone2.jpg', title: 'phone2'},
{img: 'img/phone/phone3.jpg', title: 'phone3'},
{img: 'img/phone/phone4.jpg', title: 'phone4'},
]
};
new Vue({
el: '#d1',
data: {
ad_data,
ad_arr: '',
v1: '当前未选择任何广告',
},
components: {
localTag
},
methods: {
actionFn(ad_title) {
this.v1 = ad_title + '被选中';
}
}
})
</script>
</body>
</html>
Vue小练习 03的更多相关文章
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
- Vue小项目二手书商城：（三）前端渲染数据
实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...
- Vue小项目二手书商城：（二）axios前后端数据交互
实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
- Vue小项目二手书商城：（一）准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- VUE小练习(按钮颜色，数组映射)
VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...
- vue小故事之父子(上下级)通信之父传子props
vue小故事之父子(上下级)通信之父传子props vue 父子(上下级)通信 props 或许你对父子通信有点迷糊,为什么这样那样父子之间就可以通信了,以下通过一个小故事来进行解说,故事模型或许有 ...
随机推荐
- jmeter微信公众号接口测试实例
线程组 HTTP Cookie 管理器 HTTP 请求默认值 用户定义的变量 察看结果树 HTTP请求 响应断言 正则表达式提取器 线程组 HTTP Cookie 管理器 HTTP 请求默认值 用户定 ...
- 递归的实际业务场景之MySQL 递归查询
喜欢就点个赞呗! 源码<--请点击此处查看 引入 当我看到一些评论时,例如下面的样子.我挺好奇这个功能是怎么样做出来的.进过查阅资料,发现这其实是 MySQL 的递归操作.下面就让我操作一下怎么 ...
- LNMP-Nginx反向代理
Nginx反向代理 Nginx提供反向代理的模块http proxy,这个模块是默认的,不需要重新编译模块.通常情况下,Nginx代理一般常用的环境是,提供web服务的服务器放在内网,暴露在外网上容易 ...
- firefox浏览器写xpath
最近在学xpath发现Firefox浏览器不支持xpath定位页面元素 百度为例: F12 页面前端代码 输入最简单的xpath发现并不能定位元素 解决方案:添加 Try Xpath 这个插件,因为 ...
- 学习了JsonSchema，我自定义了一个校验代码
JsonSchema 使用fastjsonschema来校验数据 # 导入验证器 import json import fastjsonschema # 读取schema with open('../ ...
- python爬虫--分布式爬虫
Scrapy-Redis分布式爬虫 介绍 scrapy-redis巧妙的利用redis 实现 request queue和 items queue,利用redis的set实现request的去重,将s ...
- GoLand不同目录(包)方法调用
新手学go,跨目录调用方法是真的难,弄了好几天,几乎要放弃go了,在此演示一下如何跨目录(包)调用~ 需求是main.go调用model包下mysql.go中Query方法,目录结构如下. 要点: 1 ...
- django查询中模糊的知识点，filter(blog=blog)，filter(username=username).first()--这两者只需一招让你分清QuerySet对象，和用户字典对象
只需一招让你分清QuerySet对象,和用户字典对象 article_list = models.Article.objects.filter(blog=blog) user_obj = models ...
- Python 进阶之源码分析：如何将一个类方法变为多个方法？
前一篇文章<Python 中如何实现参数化测试?>中,我提到了在 Python 中实现参数化测试的几个库,并留下一个问题: 它们是如何做到把一个方法变成多个方法,并且将每个方法与相应的参数 ...
- Python面向对象-继承和多态特性
继承 在面向对象的程序设计中,当我们定义一个class时候,可以从现有的class继承,新的class成为子类,被继承的class称为基类,父类或超类. 比如,编写一个名为Animal的class: ...