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的更多相关文章
随机推荐
- mvvmlight下passwordBox绑定的解决方法
在做公司的项目中,用到MVVMLight框架,需要做登陆注册的功能模块,但是在wpf中passwordBox没有内置绑定功能,因为出于安全的考虑.但是,博主又非常想要契合mvvm思想,一定要passw ...
- Anaconda如何配置多版本Python
https://blog.csdn.net/guanmaoning/article/details/80031279
- ES6之主要知识点（八）Symbol
防止属性名的冲突.这就是 ES6 引入Symbol的原因. 它是 JavaScript 语言的第七种数据类型,前六种是:undefined.null.布尔值(Boolean).字符串(String). ...
- elasticsearch river 参数文档
JDBC River parameters Jörg Prante edited this page on 23 Jan 2014 · 3 revisions Pages 15 Home Bulk i ...
- 不同版本springboot上传文件大小设置
参考原文:https://blog.csdn.net/awmw74520/article/details/70230591 Spring Boot 1.3.x或者之前 multipart.maxFil ...
- day 71作业
作业: url配置 urlpatterns = [ url(r'^v2/cars/$',views.CarAPIView.as_view()), url(r'^v2/cars/(?P<pk> ...
- exit()和return语句的区别
(1)exit用于结束正在运行的程序,exit函数将参数是返回给OS.而return是返回函数值并退出函数. (2)return是语言级别的,它表示了调用堆栈的返回:而exit是系统调用级别的,它表示 ...
- 【python之路44】tornado的用法 （二）
参考:https://www.cnblogs.com/sunshuhai/articles/6253815.html 一.代码目录构建 代码目录设置如下图: #!/usr/bin/env python ...
- springboot核心技术(一)-----入门、配置
Hello World 1.创建一个maven工程:(jar) 2.导入spring boot相关的依赖 <parent> <groupId>org.springframewo ...
- ERROR:ORA-30076: 对析出来源无效的析出字段
DEBUG:key: sql: select count(*) as col_0_0_ from jc_user cmsuser0_ where 1=1 and cmsuser0_.register_ ...