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的更多相关文章
随机推荐
- 2.Spring【DI】XML方式
依赖: 在A类中引用了B类,说明A依赖于B. 注入: 使用Spring框架给A类中的B对象的属性赋值. 直接上代码: 1.只使用IOC public class Person { private St ...
- 乐观、悲观锁、redis分布式锁
悲观锁总是假设最坏的情况,每次去拿数据的时候都认为别人会修改,所以每次在拿数据的时候都会上锁,这样别人想拿这个数据就会阻塞直到它拿到锁(共享资源每次只给一个线程使用,其它线程阻塞,用完后再把资源转让给 ...
- js的相关距离
js的相关距离 一.dom对象的距离 ---dom.style.width : 对象本身的内容宽度(这里必须是内联样式中的width,带px)(content) ---dom.style.height ...
- LUOGU P3157 [CQOI2011]动态逆序对(CDQ 分治)
传送门 解题思路 cdq分治,将位置看做一维,修改时间看做一维,权值看做一维,然后就转化成了三维偏序,用排序+cdq+树状数组.注意算删除贡献时要做两次cdq,分别算对前面和后面的贡献. #inclu ...
- SQLServer：目录
ylbtech-SQLServer:目录 1.返回顶部 2. 文档返回顶部 · https://docs.microsoft.com/zh-cn/sql/sql-server/sql-server ...
- JEECMS的几个细节
最近想自己写一些标签,看了一下JEECMS,感觉有些标签还是很值得学习的. 1.图片新闻:可以实现类似于flash切换图片的那种效果 效果: 代码: [@cms.ArtiList chnlId='' ...
- Java虚拟机系列（三）---内存溢出情况及解决方法
因为Java虚拟机内存有堆内存.方法区.虚拟机栈.本地方法栈和程序计数器五部分组成,其中程序计数器是唯一一块不会发生内存溢出异常的内存区,所以只有四类内存区可能发生内存溢出异常,其中虚拟机栈和本地方法 ...
- Java获取系统时间少了八个小时
Java获取系统时间少了八个小时 今天忽然遇到需要获取当前时间的问题,我向来谨慎,先测试获取到的系统时间是否正确,结果竟然发现少了八个小时,晕死了,记得之前在页面用javascript获取过当前时间, ...
- K8s 学习者绝对不能错过的最全知识图谱（内含 56个知识点链接）
导读:Kubernetes 作为云原生时代的“操作系统”,熟悉和使用它是每名用户的必备技能.本篇文章概述了容器服务 Kubernetes 的知识图谱,部分内容参考了网上的知识图谱,旨在帮助用户更好的了 ...
- UI2Code智能生成Flutter代码--整体设计篇
摘要: UI2CODE项目是闲鱼技术团队研发的一款通过机器视觉理解+AI人工智能将UI视觉图片转化为端侧代码的工具. 背景: 随着移动互联网时代的到来,人类的科学技术突飞猛进.然而软件工程师们依旧需要 ...