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 ...
随机推荐
- github上fork的项目,如何同步原作者更新的内容?
一.引言 我在github上fork了一个项目,之后原作者又更新了内容,我想把原作者更新的内容同步到我fork的项目仓库中.在此记录一下同步步骤. 二.同步步骤 打开fork的项目的主页,点击Ne ...
- stm32配置led
前言:我们学习一门新语言的时候都是先从hello world入门,stm32也有自己的入门方式,那就是流水灯的配置. 在配置之前我们需要先配置好编译环境,我们需要手动修改头文件中的一些内容. 1.首先 ...
- [SpingBoot guides系列翻译]文件上传
文件上传 这节的任务是做一个文件上传服务. 概况 参考链接 原文 thymeleaf spring-mvc-flash-attributes @ControllerAdvice 你构建的内容 分两部分 ...
- (二十八)golang--二维数组
初始化: var array [2][3]int = [2][3]int{{0,0,0},{0,0,0}} var array [2][3]int = [...][3]int{{0,0,0},{0,0 ...
- Java连载1-概述&常用的dos命令
本想写完那两个再开始新的,然而客观条件不允许,之前从未接触过Java,从零开始吧!!! 一.概述 C盘下:programme file 一般为64位程序安装的目录,programme file(X ...
- 从零到一手写基于Redis的分布式锁框架
1.分布式锁缘由 学习编程初期,我们做的诸如教务系统.成绩管理系统大多是单机架构,单机架构在处理并发的问题上一般是依赖于JDK内置的并发编程类库,如synchronize关键字.Lock类等.随着业务 ...
- 【MySQL】条件查询之排序聚合分组分页查询
排序查询 语法:order by 子句 order by 排序字段1 排序方式1 , 排序字段2 排序方式2... 排序方式: ASC:升序,默认的. DESC:降序. 注意: 如果有多个排序条件,则 ...
- CentOS 8 换源,设置dnf / yum镜像
aliyun更新了centos8的说明 curl -o /etc/yum.repos.d/CentOS-Base.repo http://mirrors.aliyun.com/repo/Centos- ...
- C#: 解决Fody is only supported on MSBuild 16 and above
背景信息: 使用Costura.Fody插件将自己写的程序打包成一个可以独立运行的EXE文件我们在开发程序的时候会引用很多DLL文件,在程序完成编写后,如果不把这些引用的DLL打包,在拷贝给到别人使用 ...
- Java编程基础——流程控制
Java编程基础——流程控制 摘要:本文主要介绍Java编程中的流程控制语句. 分类 流程控制指的是在程序运行的过程中控制程序运行走向的方式.主要分为以下三种: 顺序结构:从上到下依次执行每条语句操作 ...