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的更多相关文章
随机推荐
- python 描述器
语法简析 一般来说,描述器(descriptor)是一个有”绑定行为”的对象属性(object attribute),它的属性访问被描述器协议方法重写.这些方法是 __get__(). __set__ ...
- 跟我一起在ubuntu中安装docker
卸载旧版本 $ sudo apt-get remove docker docker-engine docker.io 查看ubuntu版本 设置安装源 通过如下步骤,设置安装源仓库,这里我们使用阿里源 ...
- 吴恩达《机器学习》课程总结(18)_照片OCR
18.1问题描述和流程图 (1)图像文字识别是从给定的一张图片中识别文字. (2)流程包括: 1.文字侦测 2.字符切分(现在不需要切分了) 3.字符分类 18.2滑动窗口 在行人检测中,滑动窗口是首 ...
- 使用cmd查看windows端口占用情况，并关闭应用
在做开发的时候常常会遇到端口被占用的问题,下面是我在网上找的比较好用的一种关闭占用端口进程的方法 1.在运行中输入cmd打开dos命令窗口,比如我想找到端口8888对应的PID(通过PID找到相应的进 ...
- vim之buffer 与 折叠
常用的折叠命令有: zf zi zo zc zd zf10j从当前行向下10行创建折叠(共11行),zfj创建两行的折叠 常用的还有zf%. 进行多文件编辑时,会涉及到buffer的使用::ls 查看 ...
- CentOS设置打开终端快捷键
- 解决 Error retrieving parent for item: No resource found that matches the given name 'Theme.AppCompat.Light.DarkActionBar'
If you are looking for the solution in Android Studio : Right click on your app Open Module Settings ...
- node.js 安装步骤
1.打开链接(http://nodejs.cn/download/) 2.下载自己所需的安装包(32位 or 64位.哪个系统) 3.双击直接安装(成功如下图) 4.点击 Node.js comman ...
- 单例模式(Singleton)（单一实例）
单例模式基本要点: 用于确保一个类只有一个实例,并且这个实例易于被访问. 让类自身负责保存他的唯一实例.这个类可以保证没有其他实例创建,并且他可以提供一个访问实例的方法,来实现单例模式. (1)把构造 ...
- Django--csrf跨站请求伪造、Auth认证模块
form表单中使用跨站请求伪造 { % csrf_token % } 会动态生成一个input框,内部的value是随机刷新的 如果不想校验csrf from django.views.decorat ...