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的更多相关文章
随机推荐
- Spring boot获取yml字段内容为null的各种情况
首先,在resource目录下配置test.yml文件 A: B: http://123.com? C: username="lili"&password="12 ...
- Tornado Demo1---webspider分析
Demo源码地址 https://github.com/CHUNL09/tornado/tree/master/demos/webspider 这个Demo的作用是用来获取特定URL的网页中的链接(链 ...
- C开发系列-函数
概述 任何一个C语言程序都是有一个或多个程序段(小程序构成).每个程序都有自己的功能,我们一般称这些程序段为"函数". 函数的执行过程 #import <Foundation ...
- Java基础（业务问题）
幂等的处理方式 一.查询与删除操作是天然幂等 二.唯一索引,防止新增脏数据 三.token机制,防止页面重复提交 四.悲观锁 for update 五.乐观锁(通过版本号/时间戳实现, 通过条件限制 ...
- hdu1527
hdu1527两堆博弈模型,威佐夫博弈 #include<iostream> #include<cstdio> #include<queue> #include&l ...
- HZOI2019序列
题目链接:https://www.cnblogs.com/Juve/articles/11186805.html(密码是我的一个oj用户名) 题解: 这题我考试打的暴力,只有5分. 一开始理解错题意了 ...
- Navicat12.1.7破解教程
https://blog.csdn.net/qq_39344689/article/details/85161342
- HTML5 drag拖动事件
参考链接:https://segmentfault.com/a/1190000013606983 例子: <!DOCTYPE HTML> <html> <head> ...
- MUI使用vue示例
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name ...
- 封装原生JavaScript的ajax
function obj2str(data) { data = data || {}; // 如果没有传参, 为了添加随机因子,必须自己创建一个对象 data.t = new Date().getTi ...