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的更多相关文章
随机推荐
- Nodejs之路（二）—— Nodejs再入门
一.在Node中使用模板引擎 js代码: // art-template不仅可以在浏览器使用,也可以在node中使用 // 1.安装 npm install art-temlate模板引擎 // 2. ...
- webpack 打包生成的index 路径引用不对
webpack 在打包时在访问打包里面的index时,出现路径错误 修改方法为 解决方法:在config下面的index.js把 assetsPublicPath: '/', 修改为: assetsP ...
- PHP CURL 异步测试
需求, 请求第三方接口获取数据, 单个接口0.1秒, 如果有10万个接口, 那么岂不是得1万秒才能请求完, 所以使用PHP异步测试一下, 其他的方法还有: 1.使用队列, SupserVior 开多个 ...
- ERP或PLM系统-物料编码管理的技术实现
1 企业现状 企业日常经营过程中会产生大量的文档,如设计图纸.变更单.计算书.设计方案等,如果是制造企业还会产生大量的产品.组成产品的零部件等物料,这些数据在进入信息系统前都需要有一个唯一的标识,也就 ...
- 廖雪峰Java10加密与安全-3摘要算法-3SHA-1算法
1.SHA-1算法 SHA-1算法也是一种哈希算法. 输出160 bits/20bytes 由美国国家安全局开发 SHA-0/SHA-1/SHA-256/SHA-512 * SHA-0有问题,已经作废 ...
- c++设计模式：观察者模式
主要思想:建立一个一对多的关系,当一个对象发生发生变化时,其他对象也发生变化. 可以举个博客订阅的例子,当博主发表新文章的时候,即博主状态发生了改 变,那些订阅的读者就会收到通知,然后进行相应的动作, ...
- 深入了解组件- -- 动态组件 & 异步组件
gitHub地址:https://github.com/huangpna/vue_learn/example里面的lesson11 一 在动态组件上使用keep-alive 在这之前我们已经有学习过用 ...
- Tool-XManager：XManager（远端X窗口系统的工具）
ylbtech-Tool-XManager:XManager(远端X窗口系统的工具) Xmanager是一款小巧.便捷的浏览远端X窗口系统的工具.在工作中经常使用Xmanager来登录远端的Solar ...
- git放弃本地所有未提交的修改
1.未添加至暂存区的 git checkout . 2.已添加至暂存区的 git reset HEAD . git checkout .
- VMware 设置支持UEFI
修改后缀名为 vmx 配置文件 添加行: bios.bootDelay = "10000" //延迟10秒进入系统 firmware = "efi" ...