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 ...
随机推荐
- JDK的小Bug你了解么？
用了这么长时间的JDK了,有没有老铁发现JDK的bug呢?从最早版本的JDK1.2到现在普及开的JDK1.8以来,JAVA经历了这么多年的风风雨雨,依然坚持在一线上,是不是感觉很神奇,但是,有没有多 ...
- TreeMap 原理
基于jdk1.8 TreeMap第一个想到的就是有序,当然也不是线程安全 TreeMap实现NavigableMap接口,说明支持一系列的导航方法 一.构造方法 public TreeMap() { ...
- java基础 Unsafe
参考文章: https://tech.meituan.com/2019/02/14/talk-about-java-magic-class-unsafe.html
- Debug 路漫漫-15：Python: NameError：name 'dataset' is not defined
在调试 <Outer Product-based Neural Collaborative Filtering>论文的源码(https://github.com/duxy-me/ConvN ...
- Linux和windows下修改tomcat内存
原文地址:https://www.cnblogs.com/wdpnodecodes/p/8036333.html 由于服务器上放的tomcat太多,造成内存溢出. 常见的内存溢出有以下两种: java ...
- 查看xml源码的方法
查看xml源码的方法 要通过查看源码才能看到xml源码 因为 print_r输出的时候 默认页面打开是html编码的...... 所以解析不了xml
- $.Ajax、$.Get、$.Post代码实例参数解析
$.ajax 语法: $.ajax({name:value, name:value, ... }) 示例: $.ajax({ url: "/testJson", type: &qu ...
- 《 .NET并发编程实战》扩展阅读 - 元胞自动机 - 1 - 为什么要学元胞自动机
先发表生成URL以印在书里面.等书籍正式出版销售后会公开内容.
- WPF-自定义实现步骤条控件
步骤条实现的效果: 步骤条控件是在listbox的基础上实现的. 一. xaml代码: <Window.Resources> <convert1:StepListBarWidthCo ...
- asp.net 创建虚拟目录 iis创建虚拟目录
这几天本人接了个档案管理查询系统的小项目,踩过的坑. 其实功能都挺简单的,大致要求客户有很多pdf文档,为了方便管理,所有要开发一个相当于文件管理系统,本人正好有现成的文件管理系统,修改下就可以.其中 ...