• 有红, 黄, 蓝三个按钮, 以及一个200X200px的矩形box, 点击不同的按钮, box的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<style>
.box {
width: 200px;
height: 200px;
background-color: red;
}
</style> <body>
<div id="d1">
<p>
<button @click="ck('red')">红</button>
<button @click="ck('yellow')">黄</button>
<button @click="ck('blue')">蓝</button>
</p> <div class="box" :style="{backgroundColor: color}"></div>
</div>
</body>
<script src="js/vue.js"></script>
</html>
<script>
new Vue({
el: '#d1',
data: {
color: 'red'
},
methods: {
ck(color) {
this.color = color;
}
}
})
</script>
  • 一个200X200px的矩形box, 点击box本身, 记录点击次数, 1次box变为粉色, 2次变为绿, 3次变为蓝色, 4次重新回到粉色, 依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title> </head>
<style>
.wrap {
width:200px;
height:200px;
background-color:red;
}
</style>
<body>
<div id="d1"> <div class="wrap" :style="{backgroundColor:color}" @click="changeColor"></div> </div><script src="js/vue.js"></script> <script>
new Vue ({
e1: '#d1',
data: {
color: 'black',
count:0,
colorTrans: ['pink','cyan','green']
},
method: {
changeColor(){
let i = this.count+1;
this.color = this.colorTrans;
}
}
})
</script> </body>
</html>

day 67 作业的更多相关文章

  1. 2016福州大学软件工程Beta阶段团队作业成绩汇总

    1.评分规则 本次Beta阶段团队作业评分方法如下: 团队得分=[[7次scrum过程评分+(小组互评得分+教师评分)/2]/2],其中过程.小组.教师各30分 说明:由于没有规定提交团队贡献比,因此 ...

  2. 耿丹CS16-2班课堂测试作业汇总

    Deadline: 2016-11-01 11:59 作业内容 课堂测试作业总结 00.题目得5分,多半扣在格式上,有些同学代码写得很过分,已经很仁慈对待,同学们珍惜之: 01.界面设计得分不好,换行 ...

  3. SQL SERVER 中如何用脚本管理作业

    在SQL SERVER中用脚本管理作业,在绝大部分场景下,脚本都比UI界面管理作业要高效.简洁.打个简单的比方,如果你要查看作业的运行时长,如果用UI界面查看,100个作业,你就得在历史记录里面至少查 ...

  4. 第二次团队作业 -- 预则立&&他山之石

    我说的都队 031402304 陈燊 031402342 许玲玲 031402337 胡心颖 031402203 陈齐民 031402209 黄伟炜 031402233 郑扬涛 一.团队任务计划 周数 ...

  5. 软件工程(QLGY2015)第三次作业点评(含成绩)

    相关博文目录: 第一次作业点评 第二次作业点评 第三次作业点评 团队信息 本页点评团队1-22,其他组见:http://www.cnblogs.com/xiaozhi_5638/p/4490764.h ...

  6. 作业成绩 final-review 20161201-1203 15:05

    final-review阶段,20161201-20161203 15:05 final 评论II截止 20161204 09:00 申诉截止时间 20161207 12:00,微信联系杨贵福. 凡描 ...

  7. 作业成绩 final 20161124-1201 09:00

    final阶段,20161124-1201 09:00. 申诉截止时间 20161206 12:00,微信联系杨贵福. 凡描述需求或BUG时,应给出以下4项: 你期待看到的现象如何 你实际看到的现象 ...

  8. 第三次作业——K米评测

    第一部分 调研,评测 1.第一次上手体验 其实让我下载一个APP并且长期使用它是一件特别难的事情,不仅是因为占空间,需要注册个人信息,绑定账号,更是因为每款软件的功能虽然都很齐全,但是你并在没有真正用 ...

  9. C2第三次作业解题报告

    看过题解后如果觉得还算有用,请帮忙加点我所在团队博客访问量 http://www.cnblogs.com/newbe/ http://www.cnblogs.com/newbe/p/4069834.h ...

随机推荐

  1. linux的cpu使用率

    linux 上一个核占满是 100%,双核机器占满整个 CPU 是 200%

  2. 复杂模拟 | 1014 模拟K个同时到来的人在N个窗口,每个窗口只能站M个人的银行排队

    这题我以为还是之前银行排队的思路,但是做着做着就做不下去了了.看了答案我才理解到底是什么个思路. 是这样的:不同于之前排队的题,这里的K个人是同时到来的.所以首先应该让K个人的前N*M(也就是黄线内的 ...

  3. [LeetCode] 925. Long Pressed Name 长按键入的名字

    Your friend is typing his name into a keyboard.  Sometimes, when typing a character c, the key might ...

  4. 源码解读SLF4J绑定日志实现的原理

    一.导读 我们使用log4j框架时,经常会用slf4j-api.在运行时,经常会遇到如下的错误提示: SLF4J: Class path contains multiple SLF4J binding ...

  5. 关于c语言的逻辑短路规则

    原来的代码是 if (temp == 3 && (a % b != 0 || b == 0 )){ printf("go"); } dev-c 报错: progra ...

  6. java、ajax 跨域请求解决方案('Access-Control-Allow-Origin' header is present on the requested resource. Origin '请求源' is therefore not allowed access.)

      1.情景展示 ajax调取java服务器请求报错 报错信息如下: 'Access-Control-Allow-Origin' header is present on the requested ...

  7. 原创|强大!Nginx 配置在线一键生成“神器”

    Nginx作为一个轻量级的HTTP服务器,相比Apache优势也是比较明显的,在性能上它占用资源少,能支持更高更多的并发连接,从而达到提高访问效率;在功能上它是一款非常优秀的代理服务器与负载均衡服务器 ...

  8. 用欧拉计划学Rust语言(第7~12题)

    最近想学习Libra数字货币的MOVE语言,发现它是用Rust编写的,所以先补一下Rust的基础知识.学习了一段时间,发现Rust的学习曲线非常陡峭,不过仍有快速入门的办法. 学习任何一项技能最怕没有 ...

  9. 【转】python 调用super()初始化报错“TypeError: super() takes at least 1 argument”

    一.实验环境 1.Windows7x64_SP1 2.Anaconda2.5.0 + python2.7(anaconda集成,不需单独安装) 二.实验步骤 2.1 在python中有如下代码: cl ...

  10. Hash冲突的解决--暴雪的Hash算法

    Hash冲突的解决--暴雪的Hash算法https://usench.iteye.com/blog/2199399https://www.bbsmax.com/A/kPzOO7a8zx/