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的更多相关文章
随机推荐
- 进程外Session---数据库Session的配置
怎么将Session记录到数据库中呢? 其实微软已经为我们设置好了.只要我们简单的配置一下就行了. 当然也要在 “我的电脑” 鼠标右键--->管理--->服务和应用程序----> 服 ...
- wpf关闭窗口弹出是否确认关闭的提示
if (MessageBox.Show("是否退出系统?", "退出系统?", MessageBoxButton.OKCancel, MessageBoxIma ...
- 2018-12-6-Roslyn-如何基于-Microsoft.NET.Sdk-制作源代码包
title author date CreateTime categories Roslyn 如何基于 Microsoft.NET.Sdk 制作源代码包 lindexi 2018-12-06 16:2 ...
- 动态库加载时GetLasterror();值总是126的原因
1.dll路径不正确,导致找不到dll文件. 2.有可能是你要载入的DLL在内部还需要载入其它的dll,而它不存在,同样会返回126错误代码.比如一个你给系统添加了一个PCI设备,像AD采集卡之类的, ...
- 使用 QuickBI 搭建酷炫可视化分析
随着各行各业大数据的渗透,BI 类数据分析需求与日俱增,如何让可视化更好的展现数据的价值,是 BI 类产品一直努力的方向.对此国内外的BI产品都有自己的方法,如国外大牌的 PowerBI.Tablea ...
- LUOGU 9月 月赛
T1 签到题 传送门 解题思路 将原式化简一下,让n个1变成 (10^n-1)/9 ,然后再移项,变成了高次同余形式,用bsgs求解.交了好几次都是80,后来才被告知要快速乘. 代码 #include ...
- MyBatis-Spring(三)--Mapped Statements collection does not contain value for...问题解决
前一篇文章我总结了一下MyBatis-Spring项目使用SqlSessionTemplate配置的用法,其实在测试过程中并不是一帆风顺,遇到了很多的问题,最主要的就是Mapped Statement ...
- Apache Commons之commons-lang
org.apache.commons.lang3此包主要是高度可重用静态的工具方法,主要是对java.lang类的一些补充. package com.cxl.beanutil.test; import ...
- Django项目：CRM(客户关系管理系统)--33--25PerfectCRM实现King_admin添加出错修复
{#table_change.html#} {## ————————19PerfectCRM实现King_admin数据修改————————#} {#{% extends "king_mas ...
- myql 配置项
提高数据插入速度方法 bulk_insert_buffer_size 默认:8M (8*1024*1024) 参考网址:https://stackoverflow.com/questions/2030 ...