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 小练习(按钮颜色, 数组映射)
来源: http://www.bubuko.com/infodetail-3284869.html