homeworkvue
两个半圆,点一下转90°,两个颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap {
border:3px solid black;
width: 200px;
height: 200px;
border-radius: 50%;
overflow: hidden;
margin: 50px auto 0;
position: relative;
background-color: green;
}
.red {
width: 100px;
height: 200px;
position: absolute;
background-color: red;
}
.l {
width: 100px;
height: 200px;
left: 0;
}
.t {
width: 200px;
height: 100px;
top: 0;
}
.r {
width: 100px;
height: 200px;
right: 0;
}
.b {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" @click="change" >
<div class="red" :class="red_class" ></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue ({
el:"#app",
data : {
count : 0 ,
red_class:'l',
red_arr :['l','t','r','b']
},
methods:{
change(){
this.count ++;
this.red_class=this.red_arr[this.count %4]
}
},
})
</script>
</html>
homeworkvue的更多相关文章
随机推荐
- Sql Server 2005主机和镜像切换SQL语句
--1.主备互换 --主机执行: USE master; ALTER DATABASE <DatabaseName> SET PARTNER FAILOVER; --2.主服务器Down掉 ...
- Ubuntu安装QQ、微信、微信开发者工具、搜狗输入法
wine 待补充……
- 玩转大数据系列之Apache Pig高级技能之函数编程（六）
原创不易,转载请务必注明,原创地址,谢谢配合! http://qindongliang.iteye.com/ Pig系列的学习文档,希望对大家有用,感谢关注散仙! Apache Pig的前世今生 Ap ...
- NoSQL 列族数据库
- CodeForces - 1087D
CodeForces - 1087Dhttps://vjudge.net/problem/2115151/origin2*和/叶子结点的个数 #include<iostream> #inc ...
- Vscode中问题
1.VScode中如果安装vim插件,那么编辑代码时会默认使用vim 2.出现任何问题都在设置的首选项里面修改,比如终端无法复制,或者终端右击的默认操作等
- error: stray ‘\357’ in program——输入了中文的标点符号
/home/qian/Pioneer/src/network/src/WiFi_connect.cpp::: error: stray ‘\’ in program sockfd = socket(A ...
- c++容器的操作方法总结
一.map 1.创建 typedef map<int,string> descrbe_map_; descrbe_map_ devMap; 或者 map<string,string& ...
- 转载 ASP.NET SignalR 与LayIM配合，轻松实现网站客服聊天室（三） 激动人心的时刻到啦，实现1v1聊天
ASP.NET SignalR 与LayIM配合,轻松实现网站客服聊天室(三) 激动人心的时刻到啦,实现1v1聊天 看起来挺简单,细节还是很多的,好,接上一篇,我们已经成功连接singalR服务器 ...
- PAT甲级——A1017 Queueing at Bank
Suppose a bank has K windows open for service. There is a yellow line in front of the windows which ...