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 ...
随机推荐
- Django signal(信号)
Django中提供了"信号调度",用于在框架执行操作时解耦,就是一些动作发生的时候,信号允许特定的发送者去提醒一些接受者. Django 内置信号 Model signals pr ...
- javaScript___计算时间前一天和后一天案例
1. HTML 排版 <button onclick="anteayer()">前天</button> <button onclick=" ...
- 基础知识 wps去广告
原文:http://www.360doc.com/content/19/0618/15/38017100_843312032.shtml 原文:http://wps.crcc.cn/
- 树莓派4b+linux
用Win32DiskImager烧录系统 先在boot根目录下新建ssh空文件夹来开启ssh功能,否则ssh是关闭的,用putty一直连不上,显示拒绝连接 1.联网: 初次 (实践证明:直接在sd卡根 ...
- JAVA基础系列：ThreadLocal
1. 思路 什么是ThreadLocal?ThreadLocal类顾名思义可以理解为线程本地变量.也就是说如果定义了一个ThreadLocal,每个线程往这个ThreadLocal中读写是线程隔离,互 ...
- LeetCode 283：移动零 Move Zeroes
给定一个数组 nums,编写一个函数将所有 0 移动到数组的末尾,同时保持非零元素的相对顺序. Given an array nums, write a function to move all 0' ...
- 你真的了解nginx重定向URI？-rewrite和alias指令
未经允许不得转载!最近发现有博主转载我的文章,并没有跟我打招呼,也没有注明出处!!!! 熟悉Nginx的同学都知道Nginx可以用来做负载均衡和反向代理,非常好用.做前后端分离也是非常的方便. 今天我 ...
- 解决MybatisPlus修改时空字段不修改问题
今天遇到了一个问题,在更新数据时,MybatisPlus不会进行修改属性为空的数据表字段. 解决办法: 只需要在实体类的属性上加一行注释即可 /** * 姓名 */ @TableField(fill ...
- vs2017离线包下载安装并且不占用C盘空间使用教程
安装vs2017,前提是你的环境是.NET4.6,VS2017在下载好安装程序安装的时候,会根据你选择的功能模块来下载所需要的安装程序,微软.安卓和苹果等平台的SDK.模拟器和第三方扩展功能等会在用户 ...
- 联合 CNCF 共同出品：Kubernetes and Cloud Native Meetup 成都站
亮点解读 云原生前沿技术分享:阿里经济体“云原生化”宝贵经验与最佳实践成果 OpenKruise 价值几何? 防踩坑指南:国内知名容器平台架构师解读从 ECS 迁移到 K8S 走过哪些坑. 云原生服 ...