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的更多相关文章
随机推荐
- Linux-c给线程取名字
https://blog.csdn.net/jasonchen_gbd/article/details/51308638 #define wtm_set_thread_name(n) ({ \ ] = ...
- let和const的一些知识点
let和const 不可以重复声明 不会发生变量提升,因此必须在声明之后使用,否则报错! 只在声明所在的块级作用域内有效 let 同一个作用域内不能重复声明同一个变量: function func() ...
- Windows API 第三篇
1.获得程序自身的路径: DWORD GetModuleFileName( HMODULE hModule, // handle to module LPTSTR lpFilename, // pat ...
- 浪潮云+/云加 App 智能化的企业移动办公平台官网下载地址
上Google?Facebook? 点这里: 手机端:https://ecm.inspur.com/ 桌面端:https://ecm.inspuronline.com/
- wpf listbox touch 整个窗口移动
工作中遇到遇到,在有listbox中的地方,touch listbox的时候 可以把整个窗体都移动了,解决方案如下: /// <summary> /// prevent the rubb ...
- PostgreSQL的架构
是最先进的数据库.他的第一个版本在1989年发布,从那时开始,他得到了很多扩展.根据db-enginers上的排名情况,PostgreSQL目前在数据库领域排名第四. 本篇博客,我们来讨论一下Post ...
- innodb状态
Innodb_buffer_pool_pages_data Innodb buffer pool缓存池中包含数据的页的数目,包括脏页.单位是page. Innodb_buffer_pool_pages ...
- [转]js模块化（一）
java有类文件.Python有import关键词.Ruby有require关键词.C#有using关键词.PHP有include和require.CSS有@import关键词,但是对ES5版本的ja ...
- 写一个网页进度loading
作者:jack_lo www.jianshu.com/p/4c93f5bd9861 如有好文章投稿,请点击 → 这里了解详情 loading随处可见,比如一个app经常会有下拉刷新,上拉加载的功能,在 ...
- Vue. 之 刷新当前页面，重载页面数据
Vue. 之 刷新当前页面,重载页面数据 如下截图,点击左侧不同的数据,右侧根据左侧的KEY动态加载数据.由于右侧是同一个页面,在进行路由跳转后,不会再次刷新数据. 解决方案: 右侧的页面中 scri ...