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的更多相关文章
随机推荐
- Activiti 部分实用功能
helloworld中已经写了关于部署流程图,查询个人任务,完成个人任务部分.现在添加几个新的实用功能 1.判断流程是否完成,代码如下 public void isProcessEnd() { Str ...
- 如何做系列(1)- mybatis 如何实现分页？
第一个做法,就是直接使用我们的sql语句进行分页,也就是在mapper里面加上分页的语句就好了. <select id="" parameterType="&quo ...
- 03.Hibernate配置文件之核心配置文件
一.核心配置文件的两种配置方式 1.属性文件方式 hibernate.properties(基本不会选用 hibernate.connection.driver_class=com.mysql.jdb ...
- leetcode 1078 Occurrences After Bigram
lc1078 Occurrences After Bigram trim().split()将原字符串转换成words数组 依次匹配first和second,若两者都能匹配上,则下一个单词为third ...
- JS播放视频代码
<div class="col-md-8"> <div id="moviecontainer"></div> </di ...
- Web API 接口说明文档
1.采用 Web API Help Page 显示效果 2.swaggerui 创建文档接口 效果图 3.swagger ui 安装配置 nuget 安装 2.设置xml文件 3.配置根路径 预览sw ...
- JS--封装JS跳转页面函数
//JS跳转页面 function gourl($iAlert,$iPage,$history='',$target="window") { if ($iAlert != &quo ...
- layer时间插件
引入: <link rel="stylesheet" href="<{$cdnsite}>/default/common/layui/css/layui ...
- 原生微信小程序数据渲染
一直在写vue,第一次接触微信小程序,还是原生,最开始做的时候真的很闹心啊啊啊啊啊啊啊啊啊啊啊啊!!所以最近大概更新的都是微信小程序原生的内容了~~么么哒!!一定会继续努力的!!tips:在小程序项目 ...
- ArcSDE 10.0与ArcSDE10.1的又一个区别
ArcSDE10.0 安装后直接在创建sde表空间和sde用户的时候创建了sde服务:而sde10.1可以直接先通过ArcMap10.1直连数据库,创建sde表空间.sde用户.然后在有必要的情况下再 ...