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的更多相关文章
随机推荐
- /etc/sysctl.conf配置文件
# vi /etc/sysctl.conf # add by digoal.zhou fs.aio-max-nr = fs. kernel.core_pattern= /data01/corefile ...
- Django项目：CRM(客户关系管理系统)--81--71PerfectCRM实现CRM项目首页
{#portal.html#} {## ————————46PerfectCRM实现登陆后页面才能访问————————#} {#{% extends 'king_admin/table_index.h ...
- CSS 滤镜效果
本文所描述的滤镜,指的是 CSS3 出来后的滤镜,不是 IE 系列时代的滤镜,语法如下,还未接触过这个属性的可以先简单到 MDN -- filter 了解下: { filter: blur(5px); ...
- 局部内部类为什么只能访问final局部变量，对于成员变量却可以随便访问？
局部内部类为什么只能访问final局部变量,对于成员变量却可以随便访问? public class OuterClass { private int memberField = 10; public ...
- java连接达梦数据库的简单代码
1. 引用DmJdbcDriver.jar包 2. 编写代码: String driver= "dm.jdbc.driver.DmDriver"; String url= &quo ...
- 卸载VS2015之后，安装VS2017出错
安装出现问题. 可通过以下方式排查包故障问题: 1. 使用以下搜索 URL 来搜索针对每个包故障的解决方案 2. 针对受与影响的工作负荷或组件修改选项,然后重新尝试安装 3. 从计算机上删除产品,然后 ...
- Simple implementation and results of genetic algorithm.
This experiment was done for the final assignment of my Professional English class. This part has be ...
- js 高亮显示关键字
示例: var defaultEmphasisHandler = function(keyword, data){ var regex = RegExp("("+keyword.r ...
- TZ_10_spring-AOP日志处理
1.在某个用户登陆后台后对其每一项操作进行保存日志处理 LogAopController @Component @Aspect public class LogAop { @Autowired pri ...
- LINQ（语言集成查询）
LINQ,语言集成查询(Language Integrated Query)是一组用于c#和Visual Basic语言的扩展.它允许编写C#或者Visual Basic代码以查询数据库相同的方式操作 ...