红黄蓝三个按钮,点击不同的按钮可以切换一个200*200的矩形框对应的颜色

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="homework1">
<p @click="red">red</p>
<p @click="blue">blue</p>
<p @click="green">green</p>
<p :class="c1" :style="color" ></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#homework1",
data:{
c1:"d1",
color:{
backgroundColor:"orange"
}
},
methods:{
red(ev,color){
this.color.backgroundColor = 'red'
},
blue(ev,color){
this.color.backgroundColor = 'blue'
},
green(ev,color){
this.color.backgroundColor = 'green'
},
}
})
</script>
</html>

一个200*200的矩形框,点击其本身,记录点击次数,1此为pink色,2次为green色,3次为cyan色,4次为pink色以此类推.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.d1 {
width: 200px;
height: 200px;
}
</style>
</head>
<body>
<div id="homework2">
<p :class="c1" :style="color" @click="count"></p>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let click_num = 0;
new Vue ({
el: "#homework2",
data: {
c1: "d1",
color: {
backgroundColor: "pink"
},
},
methods: {
count(){
click_num +=1;
if (click_num ==1){
this.color.backgroundColor = "pink"
} else {
if (click_num ==2){
this.color.backgroundColor = "green"
} else {
this.color.backgroundColor = "cyan"
click_num=0
}
}
}
},
})
</script>
</html>

vuehomework1的更多相关文章

随机推荐

  1. mybatis第二篇—参数绑定

    不管我们在做数据库作业或者任务还是当时的仅靠jdbc来写一个管理系统的时候,sql语句需要一些参数,从而来实现模糊查询,精确查询,插入数据,更新数据和删除数据.这些参数,在mybatis里面,又该如何 ...

  2. MapReduce 图解流程超详细解答(2)-【map阶段】

    接上一篇讲解:http://blog.csdn.net/mrcharles/article/details/50465626 map任务:溢写阶段 正如我们在执行阶段看到的一样,map会使用Mappe ...

  3. Python开发之MySQL安装

    MySQL下载安装后再安装破解版本的Navicat图形化数据库工具即可.   安装python后.再进行如下操作(也可以安装好虚拟环境virtualenv 或者增强工具pip install virt ...

  4. BZOJ3907 网格 卡特兰数

    题目描述 某城市的街道呈网格状,左下角坐标为A(0, 0),右上角坐标为B(n, m),其中n >= m. 现在从A(0, 0)点出发,只能沿着街道向正右方或者正上方行走,且不能经过图示中直线左 ...

  5. html特殊字符 编码css3 content:"特殊符号"一览

    工作中经常会用到用纯css3美化复选框 <div class="cross"></div> css代码.cross{ width: 20px; height ...

  6. ac68u、r8500 梅林固件扩展为一个小型 linux 系统

    事先刷 merlin 固件 1.安装 Entware 在安装之前,你需要在路由器中插入一个 U 盘,并将其格式化为 Ext3 / Ext4 格式,插上后在 /mnt/ 下应会多个 sda 设备出来 e ...

  7. Shell 语法之用户输入

    bash shell 提供了一些不同的方法从用户处获取数据,这些方法包括命令行参数.命令行选项和直接读取键盘输入. 命令行参数 bash shell 将在命令行中输入的所有参数赋值给一些特殊变量,称为 ...

  8. 洛谷p1008 三连击

    https://www.luogu.org/problemnew/show/P1008 题目描述 将1,2,3,4,5,6,7,8,9共9个数分成3组,分别组成3个三位数,且使这3个三位数的值构成1: ...

  9. Linux下ps -ef和ps aux的区别及格式详解-转

    原文:https://www.linuxidc.com/Linux/2016-07/133515.htm Linux下显示系统进程的命令ps,最常用的有ps -ef 和ps aux.这两个到底有什么区 ...

  10. 2019-8-31-dotnet-获取用户设备安装了哪些-.NET-Framework-框架

    title author date CreateTime categories dotnet 获取用户设备安装了哪些 .NET Framework 框架 lindexi 2019-08-31 16:5 ...