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 ...
随机推荐
- Flutter、Weex、RN，Native对比
- lua table 的操作(四)
table在前面作过介绍,它是一种关联数组,这种关联指的是可以设置各类类型的key来存储值. 1.table 间的数据传递 -- 为 table a 并设置元素,然后将 a 赋值给 b,则 a 与 b ...
- SQL SERVER YEAR函数
定义: YEAR函数返回指定日期的年的部分 语法: YEAR(date) 参数: ①date参数是合法的日期表达式. 返回值: int型数据 例: 声明:本文是本人查阅网上及书籍等各种资料,再加上自 ...
- IDEA插件之JProfiler
1.是什么?来用干嘛的? 一个商业授权的Java剖析工具. 用来剖析程序内存.CPU使用情况,找到性能瓶颈,快速定位问题所在. 2.IDEA安装JProfiler插件 (1)File -> Se ...
- 基于docker的mongodb安装以及PHP使用
说明:用docker基于单服务器,虚拟多个服务器的方案, 以下是两个config服务器,两个分片,以及每个分片有一个副本的方案 这里关于给mongodb设置远程密码的问题,我采取了用两个compser ...
- 怎样使用FormData对象加工表单数据
1. 获取表单(form)节点 2. 对FormData实例做相关操作 3. 发起HTTP请求 function sendForm(form) { var formData = new FormDat ...
- 关于Mybatis的几件小事(二)
一.MyBatis缓存机制 1.简介 Mybatis包含了一个非常强大的查询缓存的特性,它可以非常方便地配置和定制. 缓存key极大提高查询效率 MyBatis系统中默认定义了两次缓存 默认情况下,只 ...
- GoBelieve service部署问题整理
- 三 HashSet
HashSet无序且不能重复 1.HashSet类的字段属性 //HashSet集合中的内容是通过 HashMap 数据结构来存储的 private transient HashMap<E,Ob ...
- Java秒杀实战 （四）JMeter压测
转自:https://blog.csdn.net/qq_41305266/article/details/81071278. 一.JMeter入门 下载链接 http://jmeter.apache. ...