vuehomework1
红黄蓝三个按钮,点击不同的按钮可以切换一个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的更多相关文章
随机推荐
- 网络结构解读之inception系列五：Inception V4
网络结构解读之inception系列五:Inception V4 在残差逐渐当道时,google开始研究inception和残差网络的性能差异以及结合的可能性,并且给出了实验结构. 本文思想阐述不多, ...
- Apache 禁用IP 访问 和 HTTP 跳转 HTTPS
如果需要 禁用IP 访问并且 需要 HTTP 跳转到 HTTPS <VirtualHost *:80> ServerName xxx.xxx.com RewriteEngine On Re ...
- 19-10-16-R
其实……这篇是真咕了. 反思: ××我$T1$两个小时构造$xiebi$了(虽然我觉得如果干仨小时可能行?) ……如果$T1$用时过长的话那考试多半不行…… 结果: 35 Miemeng 50 03: ...
- sql删除重复的记录保留一条
delete from A_TO_NOW where yuan_name in (select yuan_name from A_TO_NOW group by yuan_name hav ...
- 数据库连接池 - (druid、c3p0、dbcp)
概述: 在这里所谓的数据库连接是指通过网络协议与数据库服务之间建立的TCP连接.通常,与数据库服务进行通信的网络协议无需由应用程序本身实现. 原因有三: 实现复杂度大,需要充分理解和掌握相应的通信协议 ...
- Linq之Sum用法新体会
1.简单应用,求数组的和,示例: , , , , , , , , , }; double numSum = numbers.Sum(); Console.WriteLine("The sum ...
- --1.plsql中学习job
--1.plsql中学习job --学习job --建表 create table test_job(para_date date); commit; insert into test_job val ...
- webService学习五（插入片，---监控方法）
WS Explorer工具的使用: 1- web服务浏览器 2-将对应的路径copy到这里 - 3- 4-- 5-- 6--请求的数据: 7--相应数据 二.使用TCP/IP Monitor-拦截HT ...
- 移动端 Iphone拍照变横问题的解决
在移动端的页面需要做用户拍照上传的功能时会有用,苹果即使竖着拍照,上传到网页后它也会变成横的,好像IOS得一个BUG,安卓就没有这个问题. 要解决这个问题需要引入exif.js这个库,网上随便搜一下就 ...
- 【笔记】LR中设置检查点
我们为什么需要在LR中设置检查点?? 我们在录制编写脚本后,通常会进行回放,如果回放通过没有错误.我们就认为脚本是正确的.那么LR怎么区分脚本是否回放正确:基本上所有脚本回放错误都是因为 404错 ...