vue作业1
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exercise</title>
<style>
.abc{
width: 200px;
height: 200px;
}
.green{
background-color: green;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="id1">
<div>
<input type="button" class="btn1 " @click="change_color1">
</div>
<div>
<input type="button" class="btn2 " @click="change_color2">
</div>
<div>
<input type="button" class="btn3 " @click="change_color3">
</div>
<div :style="myStyle1" id="id2">box</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#id1',
data:{
myStyle1: {
width: '200px',
height: '200px',
backgroundColor: 'orange'
},
},
methods:{
change_color1(){
this.myStyle1.backgroundColor = 'green'
},
change_color2(){
this.myStyle1.backgroundColor = 'red'
},
change_color3(){
this.myStyle1.backgroundColor = 'blue'
},
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exercise</title>
</head>
<body>
<div id="id1">
<div>
<input type="button" class="btn1 " @click="change_color1">
</div>
<div :style="myStyle1" id="id2" >{{ num }}</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#id1',
data:{
num:0,
color:['pink','cyan','green'],
myStyle1: {
width: '200px',
height: '200px',
backgroundColor: 'orange'
},
},
methods:{
change_color1(){
this.num += 1;
color1 = this.num%3;
console.log(color1);
this.myStyle1.backgroundColor = this.color[color1];
}
}
})
</script>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>exercise</title>
<style>
.abc{
width: 200px;
height: 200px;
}
.green{
background-color: green;
}
.red{
background-color: red;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="id1">
<div>
<input type="button" class="btn1 " @click="change_color1">
</div>
<div>
<input type="button" class="btn2 " @click="change_color2">
</div>
<div>
<input type="button" class="btn3 " @click="change_color3">
</div>
<div :style="myStyle1" id="id2">box</div>
</div>
</body>
<script src="vue.js"></script>
<script>
new Vue({
el:'#id1',
data:{
myStyle1: {
width: '200px',
height: '200px',
backgroundColor: 'orange'
},
},
methods:{
change_color1(){
this.myStyle1.backgroundColor = 'green'
},
change_color2(){
this.myStyle1.backgroundColor = 'red'
},
change_color3(){
this.myStyle1.backgroundColor = 'blue'
},
}
})
</script>
</html>
vue作业1的更多相关文章
- vue作业2
""" 2.现有以下成绩单数据 scores = [ { name: 'Bob', math: 97, chinese: 89, english: 67 }, { nam ...
- Vue习题作业练习
作业一: 用table表格标签渲染以上数据,表格第一列是学生总分排名,最后一列是学生总分 <!DOCTYPE html> <html lang="en"> ...
- 第十一篇:vue.js监听属性(大作业进行时)
这个知识点急着用所以就跳过<计算属性>先学了 首先理解一下什么是监听:对事件进行监控,也就是当我进行操作(按了按钮之类的事件)时,会有相应的事情发生 上代码 <div id = &q ...
- 第十篇:vue.js for循环语句(大作业进行时)
Vue.js 循环语句 <div id="app"> <ol> <li v-for="site in sites"> /*f ...
- 谈谈我对前端组件化中“组件”的理解，顺带写个Vue与React的demo
前言 前端已经过了单兵作战的时代了,现在一个稍微复杂一点的项目都需要几个人协同开发,一个战略级别的APP的话分工会更细,比如携程: 携程app = 机票频道 + 酒店频道 + 旅游频道 + ..... ...
- Vue#表单控件绑定
使用v-model 在表单控件上实现数据双向绑定. 单选:https://jsfiddle.net/miloer/bs49p0fx/ <input type="checkbox&quo ...
- 项目公共js(vue.js)
var urlHead = "http://hm.runorout.com/";// var urlHead = "/";/*加入跑班相关*/var urlGe ...
- Vue.JS入门学习随笔
PS:先说说学习Vue的缘由吧,学习完了React之后,突然发现又出了一款叫做vue的框架,而且据说可以引领又一波新框架的潮流,我容易吗我!!! Vue.js(读音 /vjuː/, 类似于view ...
- vue视频学习笔记01
video 1 vue:读音: v-u-eview vue到底是什么?一个mvvm框架(库).和angular类似比较容易上手.小巧mvc:mvpmvvmmv*mvx官网:http://cn.vuej ...
随机推荐
- java：HTML（table表格，ul列表）和CSS（导入.css文件，三种定义颜色方式，三种样式选择器，a标签属性顺序，）
1.重点掌握: html: 1.form表单:input,checkbox,seelct,radio,button,submit 2.table表格:thead-->tr-->th;tbo ...
- Redis 5.0
1.概述默认端口号:6379 redis是一种nosql数据库,他的数据是保存在内存中,同时redis可以定时把内存数据同步到磁盘,即可以将数据持久化,并且他比memcached支持更多的数据结构(s ...
- 【内部】Fiddler设置代理请求的方式
1.2 打开Fiiddler,设置如图步骤: 3.添加规则: 4.这里选择第三个选项: 5.选中^开始,空格结束的如图内容.复制你要代理的地址.如:http://wap.cmread.com/nap/ ...
- 20191209 Linux就该这么学（6）
6. 存储结构与磁盘划分 6.1 一切从"/"开始 Linux 系统中的一切文件都是从"根(/)"目录开始的,并按照文件系统层次化标准(FHS)采用树形结构来存 ...
- CSS基本样式-背景属性
代码是敲出来的,建议一个一个过一遍 背景属性 背景颜色 background-color 背景颜色 默认值是transparent(透明的) 示例代码 <!DOCTYPE html> &l ...
- 启用yarn的高可用
选择高可用的主机,新的一台: 点运行结束后,会看到实例会多出一个备用的节点:
- Linux下面MariaDB 管理命令基础使用
MariaDB 是 MySQL 的一个分,由于某些原因,使之取代了Mysql成为了 RHEL/CentOS 7 的默认数据库.针对数据库的操作我们经常做的操作就是增删查改,接下来就介绍下 MariaD ...
- 利用BFS解决拯救007问题 -- 数据结构
题目: 7-1 拯救007 (30 分) 在老电影“007之生死关头”(Live and Let Die)中有一个情节,007被毒贩抓到一个鳄鱼池中心的小岛上,他用了一种极为大胆的方法逃脱 —— 直接 ...
- jupyter notebook 使用多个python环境
conda install nb_conda_kernels 执行上面的命令,然后启动notebook就可以选择conda中的所有环境了
- POJ 3249 Test for Job (拓扑排序+DP)
POJ 3249 Test for Job (拓扑排序+DP) <题目链接> 题目大意: 给定一个有向图(图不一定连通),每个点都有点权(可能为负),让你求出从源点走向汇点的路径上的最大点 ...