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的更多相关文章
随机推荐
- Lab 2 内存管理
常见的操作系统 只使用了 0 和3 段选择子 DPL 是段描述符的内容 段的信息 中断和陷入的 大致特权级的展现 RPL 当前要访问数据段对饮给的特权级 CPL 当前代码段的特权级 DPL 全局的 通 ...
- jdom xpath定位带xmlns命名空间的节点（转）
jdom xpath定位带xmlns命名空间的节点 2013-06-29 0个评论 作者:baozhengw 收藏 我要投稿 关键词:jdom xpath xmlns 命名 ...
- Luogu P3496 [POI2010]GIL-Guilds(贪心+搜索)
P3496 [POI2010]GIL-Guilds 题意 给一张无向图,要求你用黑(\(K\))白(\(S\))灰(\(N\))给点染色,且满足对于任意一个黑点,至少有一个白点和他相邻:对于任意一个白 ...
- [转]Visual Studio 2010单元测试（2）－－运行测试并查看代码覆盖率
Visual Studio 2010 单元测试--运行测试并查看代码覆盖率 运行测试并查看代码覆盖率对程序集中的代码运行测试时,可以通过收集代码覆盖率数据来查看正在测试的项目代码部分. 运行测试并查看 ...
- leetcode 324 Wiggle Sort 2
利用中位数的概念,中位数就是将一组数分成2等份(若为奇数,则中位数既不属于左也不属于右,所以是2等份),其一组数中任何一个元素都大于等于另一组数 那么我们是不是只要一左一右配合着插入,就保证了差值+- ...
- c++设计模式：观察者模式
主要思想:建立一个一对多的关系,当一个对象发生发生变化时,其他对象也发生变化. 可以举个博客订阅的例子,当博主发表新文章的时候,即博主状态发生了改 变,那些订阅的读者就会收到通知,然后进行相应的动作, ...
- [转]js模块化（一）
java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5版本的ja ...
- Java SE、Java EE、Java ME三者的区别
1. Java SE(Java Platform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程 ...
- PHP中的符号 ->、=> 和 :: 的含义（用法）
php新手经常碰到的问题,->.=> 和 :: 这三个家伙是什么分别都是做什么的啊!看着就很晕. 没关系,下面我们做一下详细的解释,如果你有C++,Perl基础,你会发现这些家伙和他们里面 ...
- Java程序员面试题收集（3）
面试中被问到过的题目: 1.<%@ include=""/>和<jsp:include page="" flush="true&qu ...