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 练习的更多相关文章

  1. 如何优雅的使用vue+vux开发app -01

    如何优雅的使用vue+vux开发app -01 很明显下面是个错误的示范: <!DOCTYPE html> <html> <head> <title>v ...

  2. vue.js精讲01

    笔记及源码地址 : https://github.com/wll8/vue_note 01 2017-09-13 view一个 mvvm框架(库),和 ag 类似.比较小巧,容易上手. mvc: mv ...

  3. vue.js 2.0 官方文档学习笔记 —— 01. vue 介绍

    这是我的vue.js 2.0的学习笔记,采取了将官方文档中的代码集中到一个文件的形式.目的是保存下来,方便自己查阅. !官方文档:https://cn.vuejs.org/v2/guide/ 01. ...

  4. vue学习01

    vue学习01   1. 创建一个Vue实例官网-学习-教程-安装-(开发/生产版本)-与jQuery的引用相似 <!DOCTYPE html> <html> <head ...

  5. vue项目搭建介绍01

    目录 vue项目搭建介绍01 vue 项目框架环境搭建: 创建项目: vue 项目创建流程: vue项目搭建介绍01 vue 项目框架环境搭建: vue 项目框架: vue django(类似)(vu ...

  6. vue 2.0-1

    vue 2.0 开发实践总结之疑难篇   续上一篇文章:vue2.0 开发实践总结之入门篇 ,如果没有看过的可以移步看一下. 本篇文章目录如下: 1.  vue 组件的说明和使用 2.  vuex在实 ...

  7. vue.js插件使用(01) vue-resource

    本文的主要内容如下: 介绍vue-resource的特点 介绍vue-resource的基本使用方法 基于this.$http的增删查改示例 基于this.$resource的增删查改示例 基于int ...

  8. vue视频学习笔记01

    video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...

  9. Vuejs实例-01使用vue-cli脚手架搭建Vue.js项目

    [TOC] 1. 前言 vue-cli 一个简单的构建Vue.js项目的命令行界面 整体过程: $ npm install -g vue-cli $ vue init webpack vue-admi ...

随机推荐

  1. vue中的axios.post使用json数据传输,出现请求头字段内容类型是不被允许的情况的解决方案

    如何解决出现AXIOS的Request header field Content-Type is not allowed by Access-Control-Allow-Headers in pref ...

  2. Shortest Unsorted Continuous Subarray

    Given an integer array, you need to find one continuous subarray that if you only sort this subarray ...

  3. 什么是弹性公网IP?

    弹性公网IP(Elastic IP Address,简称EIP),是可以独立购买和持有的公网IP地址资源.目前,EIP可绑定到专有网络类型的ECS实例.专有网络类型的私网SLB实例.专有网络类型的辅助 ...

  4. LeetCode 第 14 场双周赛

    基础的 api 还是不够熟悉啊 5112. 十六进制魔术数字 class Solution { public: char *lltoa(long long num, char *str, int ra ...

  5. python os系统

    os模块中关于文件/目录常用的函数使用方法 函数名    使用方法 getcwd()  返回当前工作目录 hdir(path)  改变工作目录 listdir(path='.') 列举指定目录中的文件 ...

  6. go的命令行参数

    package main import ( "fmt" "os" ) func main() { var s, sep string for i := 1; i ...

  7. VS2017生成一个简单的DLL文件 和 LIB文件——C语言

    下面我们将用两种不同的姿势来用VS2017生成dll文件(动态库文件)和lib文件(静态库文件),这里以C语言为例,用最简单的例子,来让读者了解如何生成dll文件(动态库文件) 生成动态库文件 姿势一 ...

  8. Linux下一种高效多定时器实现

    Linux下一种高效多定时器实现 作者:LouisozZ 日期:2018.08.29 运行环境说明 由于在 Linux 系统下一个进程只能设置一个时钟定时器,所以当应用需要有多个定时器来共同管理程序运 ...

  9. MVC全局过滤器

    Asp.NET MVC4中的全局过滤器,可以对整个项目进行全局监控. 新建一个MVC4项目,可以在global.asax文件中看到如下代码:  FilterConfig.RegisterGlobalF ...

  10. Spring Cloud(四)服务提供者 Eureka + 服务消费者 Feign

    上一篇文章,讲述了如何通过RestTemplate + Ribbon去消费服务,这篇文章主要讲述如何通过Feign去消费服务. Feign简介 Feign是一个声明式的伪Http客户端,它使得写Htt ...