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 ...
随机推荐
- 如何判断你的windows系统是32位还是64位？
[学习笔记] 如 何判断你的windows系统是32位还是64位? java -version时,如果没有64就是32位的.eclipse.ini中如果没有64,就是32位的.但是我们的ini文件里面 ...
- Linux挂载磁盘&kuoron
1.添加磁盘 物理服务器直接插上硬盘即可,虚拟机的话给直接添加磁盘即可,不懂的可以自行百度,比较简单. 2.管理磁盘分区,fdisk命令. 在Linux系统中,管理硬盘设备最常用的方法就当属 fdis ...
- 序列化,os,sys,hashlib,collections
序列化,os,sys,hashlib,collections 1.序列化 什么是序列化?序列化的本质就是将一种数据结构(如字典,列表)等转换成一个特殊的序列(字符串或者bytes)的过程就叫做序列化. ...
- 【转】iis7下站点日志默认位置
本文转自:http://www.cnblogs.com/mincyw/p/3425468.html 在iis6时,通过iis管理器的日志配置可以找到站点日志存储的位置. 但是在iis7下,iis管理器 ...
- 《深入理解 Java 虚拟机》学习 -- Java 内存模型
<深入理解 Java 虚拟机>学习 -- Java 内存模型 1. 区别 这里要和 JVM 内存模型区分开来: JVM 内存模型是指 JVM 内存分区 Java 内存模型(JMM)是指一种 ...
- 怎样在Chrome浏览器上安装 Vue Devtools 扩展程序
第一步: 前往 GitHub 下载 Vue Devtools 项目文件 https://github.com/vuejs/vue-devtools 注意: 1. 将分支切换为 master 2. 下载 ...
- Nopcommerce 项目添加插件
插件是用来扩展nopCommerce功能的.nopCommerce拥有多种类型的插件.例如:支付方式(PayPal),税务机构,送货方式计算方法(UPS, USP, FedEx),小部件(如“在线聊天 ...
- python 拟合曲线并求参
需要对数据进行函数拟合,首先画一下二维散点图,目测一下大概的分布, 所谓正态分布,就是高斯分布,正态曲线是一种特殊的高斯曲线. python的scipy.optimize包里的curve_fit函数来 ...
- MediaAPIController
using System; using System.Collections.Generic; using System.Collections.ObjectModel; using System.D ...
- LeetCode：178.分数排名
题目链接:https://leetcode-cn.com/problems/rank-scores/ 题目 编写一个 SQL 查询来实现分数排名.如果两个分数相同,则两个分数排名(Rank)相同.请注 ...