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的更多相关文章
随机推荐
- <数据库>MySQL补充（ 查询）
show create table 表名 \G;(查看创建的属性) alter table 表名 auto_increment=xx;(修改自增起始值) set session auto_increm ...
- Oracle的UTL_FILE.FOPEN学习笔记
Oracle提供的文件操作包UTL_FILE包中的UTL_FILE.FOPEN负责打开一个文件. UTL_FILE.FOPEN(location in varchar2, filename in va ...
- 查看MySql版本号命令
转自:https://blog.csdn.net/qq_38486203/article/details/80324014 这里介绍四中不同的方法,它们分别运行在不同的环境中,最后对每种方法的优劣以 ...
- 2018-8-10-dotnet-从入门到放弃的-500-篇文章合集
title author date CreateTime categories dotnet 从入门到放弃的 500 篇文章合集 lindexi 2018-08-10 19:16:52 +0800 2 ...
- webpack 处理图片文件
1. 安装 file-loader html-loader npm install file-loader html-loader --save-dev 其中html-loader生效需配合 html ...
- codec engine工程中使用ccs下编译的lib库
原文地址:codec engine工程中使用ccs下编译的lib库--转作者:木子小白 这两天将dsp的算法程序放到ccs下,生成lib库文件 这样的好处就是: 1. 算法封装成lib库以后,看不到源 ...
- day65——day69
目录 DAY65 课堂笔记 1.vue实例 2.插值表达式 3.文本指令 4.面向对象js 5.js函数补充 6.事件指令 7.属性指令 DAY66 课堂笔记 1.表单指令 2.条件指令 3.循环指令 ...
- js 之观察者模式
观察者模式又叫发布订阅模式(Publish/Subscribe),它定义了一种一对多的关系,让多个观察者对象同时监听某一个主题对象,这个主题对象的状态发生变化时就会通知所有的观察者对象,使得它们能够自 ...
- [mybatis]Example的用法 标签： mybatis 2017-05-21 21:46 651人阅读 评论(11)
Example类是什么? Example类指定如何构建一个动态的where子句. 表中的每个non-BLOB列可以被包括在where子句中. 例子是展示此类用法的最好方式. Example类可以用来生 ...
- 【vue】vue-znly
老规矩,放下博主的项目地址:https://github.com/wohaiwo/vue-znly 我一直在想给那些开源者取什么名字比较好,怎样才对得起他们开源项目的精神,后来想想,还是叫博主吧.有的 ...