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 ...
随机推荐
- Android使用glide加载.9图片的方法
我们在开发过程中会经常使用.9图片, 因为它可以使图片拉伸的时候,保证其不会失真. 而我们把.9图片放在服务器端,通过glide直接加载,会报错. 我们的解决方法是 通过sdk的aapt工具 把.9图 ...
- spring mvc 简单实现及相关配置实现
配置文件 actio.xml <?xml version="1.0" encoding="UTF-8"?> <controller> & ...
- （十五）springMvc 拦截器
文章目录 定义拦截器 接口中三个方法 配置拦截器 多个拦截器的规则 定义拦截器 springMvc 中定义拦截器只需要实现一个接口 org.springframework.web.servlet.Ha ...
- 用shell脚本安装MySQL-5.7.22-官方版本多实例
Install_CentOS7_MySQL57_multi_instance.sh #!/bin/bash #请提前准备好参数文件my.cnf PORT=3307 InitMySQL() { mkdi ...
- win10使用vnc远程到Ubuntu 19.04
主要参考:https://www.cyberciti.biz/faq/install-and-configure-tigervnc-server-on-ubuntu-18-04/ https://ww ...
- *4.1 所有类型都从System.Object派生
- VBA开发项目分享-1
这个项目的目的是使用VBA制作一个股票筛选器,股票的指标数据存放在多个工作表,输入多个指标的查询条件,可以从相应的工作表里查询出符合条件的股票数据并返回.项目涉及的VBA知识结构有字典.数组.OLED ...
- QT QListWidget去掉滚动条
1.去掉滚动条 设置样式 包含背景色等更改 setStyleSheet("QListWidget{color:gray;font-size:12px;background:#FAFAFD; ...
- IOI2020只因训队作业胡做
w a r n i n g ! 意 识 流 警 告 !!1 不想一个个发了,干脆直接发个合集得了qwq 感觉这辈子都做不完了\(Q\omega Q\) CF516D 写过题解了 CF505E 写过题解 ...
- 【SpringBoot】入门程序和机制分析
一.初建项目 首先要导入SpringBoot的Maven依赖 <!-- Inherit defaults from Spring Boot --> <!-- 这是SpringBoot ...