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 ...
随机推荐
- CMake下，某些选项的后调整
编译安卓NDK库时,发现在R15的NDK编译出来的库,总是带了-g选项,导致附带调试,文件过大. 搜索一番后,结论是NDK的文件中有问题: https://github.com/android/ndk ...
- pcap中不同包功能
1.不同包协议的功能 EAPoL:基于局域网的扩展认证协议 ICMPv6:(一般是四个连在一起)互联网控制协议第六套 DHCP Discover:请求分配IP DHCP Offer:你的IP是***, ...
- ansible自动化运维管理工具
1.Ansible介绍 1)Ansible:Ansible的核心程序 2)Host Inventory:(默认路径:/etc/ansible/hosts)记录了每一个由Ansible管理的主机信息,信 ...
- vue父子组件相互传值的实例
当子组件需要向父组件传递数据时,就要用到自定义事件 子组件用 $emit()来触发事件,父组件用$on()来监昕子组件的事件 父组件也可以直接在子组件的自定义标签上使用 v-on 来监昕子组件触发的自 ...
- spring boot-7.日志系统
日志系统分为两部分,一部分是日志抽象层,一部分是日志实现层.常见的日志抽象层JCL,SLF4J,JBoss-Logging,日志实现层有logback,log4j,log4j2,JUL.日志抽象层的功 ...
- 《剑指offer》面试题6 重建二叉树 Java版
(由一个二叉树的前序和中序序列重建一颗二叉树) 书中方法:我们要重建一棵二叉树,就要不断地找到根节点和根节点的左子结点和右子节点.注意前序序列, 它的第一个元素就是二叉树的根节点,后面的元素分为它的左 ...
- set的常见用法
set的使用 set是什么 set是一个内部有序且不含重复元素的容器 用处 *使得元素自动有序 *去除重复元素 set的引入 # include <set> using namespace ...
- 初识JavaScript(三)
初识JavaScript(三) 我从上一讲<初识JavaScript(二)>了解到了类型.值.变量的定义以及特点,本节我将学习到JavaScript中的算术运算.二进制浮点数和四舍五入的错 ...
- 邀请好友注册页面光标点到输入框后，输入框会先灰一下。只有ios存在
输入框会先灰一下.只有ios存在 用这一行代码可以解决问题: -webkit-tap-highlight-color:transparent;
- DAX/PowerBI系列 - 累计总计(Cumulative Total, Running Total)
DAX/PowerBI系列 - 累计总计(Cumulative Total) 2017/07/23 更新:B列公式(见最后) 2019/08/08 更新:在可视化数据的时候,一定要选择日期维度的日期列 ...