VUE小练习(按钮颜色，数组映射)
VUE小练习(按钮颜色，数组映射)
## 1.有红、黄、蓝三个按钮，以及一个200x200矩形框box, 点击不同的按钮，box的颜色会被切换成指定的颜色
'''
解法一：我本来的思路，把三个按钮绑定到一个div中，然后通过DOM操作，利用方法拿到当前event，把当前标签的父标签的background换成相应的颜色，是很笨的方法。代码比较冗余，但是是我自己的思路，可以用css样式做一些技巧
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#app {
width: 200px;
height: 200px;
background-color: antiquewhite;
}
</style>
</head>
<body>
<div id="app">
<button @click="fun($event)">红色</button>
<button @click="fun1($event)">蓝色</button>
<button @click="fun2($event)">黄色</button>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
methods: {
fun(e){
// e.target.style.backgroundColor = "#"+Math.floor(Math.random()*0xffffff).toString(16);
e.currentTarget.parentElement.style.backgroundColor = 'red';
},
fun1(e) {
e.currentTarget.parentElement.style.backgroundColor = 'blue';
},
fun2 (e){
e.currentTarget.parentElement.style.backgroundColor = 'yellow';
}
}
});
</script>
</html>
'''
解法二：三个不同的按钮，可以通过绑定同一点击事件，传入不同的参数，来表示不同的按钮。有几个点要注意
'''
"""
1.p标签把按钮包起来，box区域紧接着在下一个div中，可以实现换行。
2.box区域用一个属性指令，把background_color单独设置一个变量。
3.methods中绑定的fn方法，点击时，把颜色color进行替换。
"""
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业1</title>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<p>
<button @click="fn('red')">红</button>
<button @click="fn('yellow')">黄</button>
<button @click="fn('blue')">蓝</button>
</p>
<div class="box" :style="{backgroundColor: color}"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
color: 'red'
},
methods: {
fn(color) {
this.color = color;
}
}
})
</script>
</html>
## 2.有一个200x200的矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色
'''
思路一：
想法和上面那道题是一样的，就是点击事件中，对当前点击次数进行判断，对3取余，然后用DOM操作，对当前的背景颜色进行更改。
'''
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
#wrap {
width: 200px;
height: 200px;
background-color: peachpuff;
}
</style>
</head>
<body>
<div id="wrap" @click="fun($event)">
<label for="wrap">你一共点击了{{ count }}次</label>
</div>
</body>
<script src="js/vue.min.js"></script>
<script>
let qpp = new Vue({
el: '#wrap',
data: {count: 0,},
methods:{fun(e) {
this.count ++;
if (this.count % 3 === 1){
e.target.style.backgroundColor = 'pink';
} else if (this.count % 3 === 2){
e.target.style.backgroundColor = 'green';
}else {
e.target.style.backgroundColor = 'cyan';
}
},}
})
</script>
</html>
'''
思路二：
1.对wrap标签绑定一个属性事件（背景颜色）和一个点击事件（方法用于改变颜色属性）
2.用一个数组完成点击次数和颜色的映射，取余之后对颜色进行赋值替换
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>作业2</title>
<style>
.wrap {
width: 200px;
height: 200px;
background-color: red;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" :style="{backgroundColor: color}" @click="changeColor"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el: '#app',
data: {
color: 'black',
count: 0,
colorArr: ['cyan', 'pink', 'green']
},
methods: {
changeColor() {
let n = this.count ++;
// 先分析，建立映射关系，优化算法
this.color = this.colorArr[n % this.colorArr.length];
}
}
})
</script>
</html>
## 3.如图，图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成上绿下红，以此类推。
'''
思路：
1.父标签定位好，是一个圆，然后两个矩形拼成父标签组成的圆，然后子标签只渲染颜色，一个红一个绿色，这样给四个不同方位的矩形样式。
2.给父标签绑定点击事件，然后子标签绑定属性事件，两个属性给的实例是用元组拼凑成的颜色组合，这样在点击方法里面就可以根据点击的次数，对颜色组合进行控制，从而实现需求。
'''
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.b1 { background-color: red;
position: absolute;
}
.b2 { background-color: green;
position: absolute;
}
.l {
width: 100px;
height: 200px;
left: 0;
}
.r {
width: 100px;
height: 200px;
right: 0;
}
.t {
width: 200px;
height: 100px;
top: 0;
}
.b {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="clickAction">
<div class="b1" :class="c1"></div>
<div class="b2" :class="c2"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 1,
c1: 'l',
c2: 'r',
c1Arr: ['l', 't', 'r', 'b'],
c2Arr: ['r', 'b', 'l', 't']
},
methods: {
clickAction() {
let n = this.count ++;
this.c1 = this.c1Arr[n % 4];
this.c2 = this.c2Arr[n % 4];
}
}
});
## 下面这句就是加一个定时器，然后可以直接调用点击事件，也可以自己写点击事件，实现圆饼的旋转特效。
// setInterval(function () {
// // let n = app.count ++;
// // app.c1 = app.c1Arr[n % 4];
// // app.c2 = app.c2Arr[n % 4];
// app.clickAction();
// }, 500)
</script>
</html>
VUE小练习(按钮颜色，数组映射)的更多相关文章
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
- cube-ui修改按钮颜色
首先,当我们按照脚手架一步一步创建完项目以后 $ vue init cube-ui/cube-template projectname $ sudo npm install $ npm start 主 ...
- Cocos Creator中按钮组件数组的使用
Cocos Creator游戏开发中经常使用到按钮,特别是大量按钮的情况,此时使用数组来管理这些按钮就显得更具通用性.我大致走了一下官方的示例,好像没有发现有这个小内容(或者有,但我却是没有找到),于 ...
- JavaGUI——设置框架背景颜色和按钮颜色
import java.awt.Color; import javax.swing.*; public class MyDraw { public static void main(String[] ...
- 如何实现ZBrush 4R7中按钮颜色的自定义
本文详细讲解在ZBrush® 4R7中如何改变按钮颜色. Zbrush默认的开关按钮颜色为橙黄色,若您不喜欢当前颜色,可以通过“Icolors”功能按钮下的各命令来更改界面开关颜色及透明度 ...
- android Button 切换背景，实现动态按钮和按钮颜色渐变
android Button 切换背景,实现动态按钮和按钮颜色渐变 一.添加android 背景筛选器selector实现按钮背景改变 1.右键单击项目->new->Oth ...
随机推荐
- A1101 Quick Sort (25 分)
一.技术总结 这里的一个关键就是理解调换位置排序是时,如果是元主,那么它要确保的条件就只有两个一个是,自己的位置不变,还有就是前面的元素不能有比自己大的. 二.参考代码 #include<ios ...
- 【转】UML各种图总结
UML(Unified Modeling Language)是一种统一建模语言,为面向对象开发系统的产品进行说明.可视化.和编制文档的一种标准语言.下面将对UML的九种图+包图的基本概念进行介绍以及各 ...
- k8s云集群混搭模式落地分享
在 <k8s云集群混搭模式,可能帮你节省50%以上的服务成本>一文中,介绍了使用k8s + 虚拟节点混合集群的方式,为负载具有时间段波峰.波谷交替规律的业务节约成本,提高服务伸缩效率的部署 ...
- centos7 更换为aliyun的yum源
rm -f /etc/yum.repos.d/* wget -O /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Ce ...
- Vue全选和全不选
HTML代码: <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> ...
- TensofFlow函数: tf.image.crop_and_resize
tf.image.crop_and_resize( image, boxes, box_ind, crop_size, method='bilinear', extrapolation_value=0 ...
- 关于 NuGet 本地仓库、.NET Core 引用等实战
- Neo4j 第十一篇：Cypher函数
Cypher函数是对图进行查询和操作的重要工具. 一,谓词函数 谓词函数返回true或者false,主要用于检查是否存在或满足特定的条件. 1,Exists 如果指定的模式存在于图中,或者特定的属性存 ...
- charles注册码及中文版本，支持window和mac
安装证书: 安装完证书之后设置代理 2个* ,代表全部 注册码: Registered Name: https://zhile.io License Key: 48891cf209c6d32bf4 破 ...
- Java生鲜电商平台-供应链模块的设计与架构
Java生鲜电商平台-供应链模块的设计与架构 说明:Java开源生鲜电商平台中供应链模块属于卖家的行为,也就是卖家如何管理他们自己的供应商,包括结算方式,压款方式,结算周期等等,超出了我这个B2B平台 ...