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中的urlparse、urllib抓取和解析网页（一）
对搜索引擎.文件索引.文档转换.数据检索.站点备份或迁移等应用程序来说,经常用到对网页(即HTML文件)的解析处理.事实上,通过Python 语言提供的各种模块,我们无需借助Web服务器或者Web浏览 ...
- ROS节点的初始化及退出详解（ros::init、SIGINT、ros::ok、ros::NodeHandle
https://haoqchen.site/2018/04/28/ROS-node-init/ #include "ros/ros.h" #include <signal.h ...
- Django项目：CRM(客户关系管理系统)--74--64PerfectCRM实现CRM课程排名详情
#urls.py """PerfectCRM URL Configuration The `urlpatterns` list routes URLs to views. ...
- LA3983 Robotruck
虫洞 单调队列优化DP,感觉比较套路?上不去Vjudge,也懒得打就随便口胡一下.sxy大佬要是您看的我要是扯淡麻烦提醒我一下QAQ sum[i]表示从0到i依次走的距离,sg[i]表示1~i的重量和 ...
- 原 jeecms9自定义标签以及使用新创建的数据库表
转载地址:https://blog.csdn.net/nice_meng/article/details/89179089 本系统使用的是jeecmsv9版本,收集网上知识后,进行个人汇总 首先,自己 ...
- js 给链接 url或href或js、css、图片等解决浏览器缓存
一. 添加时间戳 情况一.链接是常量 var rand = new Date().getTime(); var aLen=document.getElementsByTagName("a&q ...
- i\'ll make a man out of you
Let's get down to business To defeat the Huns Did they send me daughters When I asked for sons? You' ...
- HDFS 冗余数据保存
- hadoop 轻松时刻 hdfs漫画
hadoop漫画:
- CodeForces - 627A
CodeForces - 627Ahttps://vjudge.net/problem/326413/origina+b == (a&b)<<1 +(a^b);然后是位运算,如果对 ...