红黄蓝三个按钮,点击不同的按钮可以切换一个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. <scrapy爬虫>基本知识-修改链接-中间件

    rules = ( Rule(LinkExtractor(allow=r'/films/\d+'),process_links='deal_links' ,callback='parse_maoyan ...

  2. Activiti历史查看

    流程执行完毕后,究竟去了哪里有些疑问. 虽然已完成的任务在act_ru_task和act_ru_execution表中都已被删除,但是这些数据还存在activiti的数据库中,作为历史改由Histor ...

  3. Compile_Netgen_WITH_OpenCascade

    title: Compile_Netgen_WITH_OpenCascade date: 2016-04-23 21:14:42 tags: 结合OCCT编译Netgen date: 2016-04- ...

  4. Linux-c glib库hash表GHashTable介绍

    百度云glib  链接:https://pan.baidu.com/s/1W9qdlMKWRKIFykenTVuWNQ 密码:ol6y hash表是一种提供key-value访问的数据结构,通过指定的 ...

  5. Luogu P2149 [SDOI2009]Elaxia的路线(最短路+记忆化搜索)

    P2149 [SDOI2009]Elaxia的路线 题意 题目描述 最近,\(Elaxia\)和\(w**\)的关系特别好,他们很想整天在一起,但是大学的学习太紧张了,他们必须合理地安排两个人在一起的 ...

  6. rabbitmq类

    1.accept.php消费者代码需要在命令行执行 2.'username'=>'asdf','password'=>'123456' 改成自己的帐号和密码 RabbitMQCommand ...

  7. linux平台进行c语言源码安装

    安装c源程序的步骤: 1. ./configure --prefix 执行编译检测 指定安装路径 2. make 编译 3. sudo make install 编译后安装 前两步可以合成一步(mak ...

  8. 洛谷 P3750 [六省联考2017]分手是祝愿

    传送门 题解 //Achen #include<algorithm> #include<iostream> #include<cstring> #include&l ...

  9. JQuery--漂亮的三目运算与jQ选择器结合代码

    $(function($) { $("input[name='timeset']").bind('click', function() { $(this).val() == 'cu ...

  10. 打包成exe可执行文件的方法

    Python安装扩展库与打包成exe可执行文件的方法 1.安装扩展库的几种方法. 首先可能需要使用 pip install --upgrade pip 来升级本机的pip程序.然后在命令提示符环境(即 ...