vue 01 练习
1.有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
height:100px;
width:100px;
}
</style>
</head>
<body>
<div id="app">
<div>
<button @click="changeColor('red')">红色</button>
<button @click="changeColor('yellow')">黄色</button>
<button @click="changeColor('blue')">蓝色</button>
</div>
<div class="box" :style="{backgroundColor:bgColor}"></div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
bgColor:'black',
},
methods:{
changeColor(color) {
this.bgColor = color;
},
}
})
</script>
</html>
2.有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.wrap {
height: 200px;
width: 200px;
background-color: black;
border: 3px solid red;
color:white;
font:bold 50px/200px 'STSong';
text-align: center;
/*cursor: crosshair;*/ /* 十字架*/
/*cursor: help;; !*箭头旁边带一个问号*!*/
/*cursor: wait ; !* 动态旋转的一个圆圈*!*/
cursor: text ; /* 此光标指示文本*/
user-select:none; /*文本不能被选中*/
}
</style>
</head>
<body>
<div id="app">
<div class="wrap" @click="actionFn" :style="{backgroundColor:bgColor}">{{ counter }}</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
counter:0,
colorArr:['cyan','pink','green',]
},
methods:{
actionFn() {
this.counter ++;
this.bgColor = this.colorArr[this.counter % 3]
},
}
})
</script>
</html>
3.如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
.box {
width: 200px;
height: 200px;
border: 1px solid black;
margin:50px auto 0;
border-radius: 50%;
overflow: hidden;
position: relative;
}
.b1 {
background-color: red;
position: absolute;
}
.b2 {
background-color: green;
position: absolute;
}
.left {
width: 100px;
height: 200px;
left: 0;
}
.right {
width: 100px;
height: 200px;
right: 0;
}
.top {
width: 200px;
height: 100px;
top: 0;
}
.bottom {
width: 200px;
height: 100px;
bottom: 0;
}
</style>
</head>
<body>
<div id="app">
<div class="box" @click="roll">
<div class="b1" :class="c1"></div>
<div class="b2" :class="c2"></div>
</div>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let app = new Vue({
el: '#app',
data: {
count: 1,
c1: 'left',
c2: 'right',
c1Arr: ['left', 'top', 'right', 'bottom'],
c2Arr: ['right', 'bottom', 'left', 'top']
},
methods: {
roll() {
let n = this.count++;
this.c1 = this.c1Arr[n % 4];
this.c2 = this.c2Arr[n % 4];
}
}
});
// 利用定时器自动旋转图像
setInterval(function () {
app.roll();
}, 100)
</script>
</html>
vue 01 练习的更多相关文章
- 如何优雅的使用vue+vux开发app -01
如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...
- vue.js精讲01
笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mv ...
- vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍
这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...
- vue学习01
vue学习01 1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...
- vue项目搭建介绍01
目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...
- vue 2.0-1
vue 2.0 开发实践总结之疑难篇 续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1. vue 组件的说明和使用 2. vuex在实 ...
- vue.js插件使用(01) vue-resource
本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...
- vue视频学习笔记01
video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...
- Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目
[TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...
随机推荐
- SQL语句中的HAVING关键字
sql中的having语句是在使用group by的时候使用的. 通常where语句是在group by之前做数据筛选的,而having语句是对group by之后的结果进行筛选的. 例如: 从商品销 ...
- Kubernetes---容器的生命周期
⒈ ⒉Init容器 介绍: Pod 能够具有一个或多个容器,应用运行在容器里面,但是它也可能有一个或多个先于应用容器启动的Init容器. Init容器与普通的容器非常像,除了如下两点: >Ini ...
- SSM框架的整合与使用——实现简单的转账系统
一.整合思路 SSM框架即SpringMVC + Spring + MyBati框架集,是一种轻量级的Web开源框架.它们各自在JAVA三层架构中负责的模块如下图所示: 其中,SpringMVC与Sp ...
- C++中如何设计一个类只能在堆或者栈上创建对象，面试题
设计一个类,该类只能在堆上创建对象 将类的构造函数私有,拷贝构造声明成私有.防止别人调用拷贝在栈上生成对象. 提供一个静态的成员函数,在该静态成员函数中完成堆对象的创建 注意 在堆和栈上创建对象都会调 ...
- NOIP（CSP）答题技巧&小细节
1.主函数类型 通常使用int main(),然而可以使用完全等价的signed main() 解锁 #define int long long 的操作 2.long long 的使用 数列长度/边 ...
- shell习题第17题：检测磁盘
[题目要求] 写一个shell脚本,检测所有磁盘分区使用率和inode使用率并记录到以当天日期命名的日志文件里,当发现某个分区容量或者inode使用量大于85%时候,发邮件提醒 [核心要点] df d ...
- echarts 根据经纬度坐标在地图上描点
var mapData = [ {'latitude':30.67, 'longitude':104.07}, {'latitude':34.76, 'longitude':113.65}, {'la ...
- 怎样获取从服务器返回的xml或html文档对象
使用 xhr.responseXML; 通过这个属性正常获取XML或HTML文档对象有两个前置条件: 1. Content-Type头信息的值等于: text/xml 或 application/x ...
- PS常识及技巧
常用格式 JPG:压缩 PNG:透明 GIF:动图 PSD:分层 分辨率 UI选择像素,印刷选择厘米 UI设计:72px 印刷分辨率必须为300 颜色模式UI网页设计:RGB 印刷类设计 ...
- Oracle权限管理详解（2）
详见:https://blog.csdn.net/u013412772/article/details/52733050 Oracle数据库推荐以引用博客: http: http:.html http ...