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 ...
随机推荐
- GCC+Make 自动生成 Makefile 依赖
目录 BASIS wildcard .PHONY 静态模式 常用自动变量 自动生成依赖(GCC) -M 参数 编写 Makefile Makefile 细节说明 其他 本文内容基于 GNU MAKE. ...
- 快速质因数分解及素性测试&ABC142D
首先,这个整数的标准分解非常的显然易见对吧: 一般我们要把一个数分解成这个样子我们可以这样写: #include<cstdio> ],w[],k; void factorize(int n ...
- CodeSmith 找不到请求的 .Net Framework Data Provider
连接数据库时候报标题的错误解决方案 安装mysql-connector-net-6.8.7.msi,下载地址:http://dev.mysql.com/downloads/connector/net/ ...
- XCode8.3真机调试设置
本文使用XCode8.3.3 首先XCode->Preferncs,进入下面的界面 点击左下角“+”号,并输入账号,然后点击Manage Certificates,左下角添加IOS develo ...
- ll按时间排序和查看目录下文件数
查询文件并以降序排列:ll -t 查询文件并以升序排列:ll -t | tac 查询目录下文件数:ll|wc -l
- python中判断字典中是否存在某个键
python3 中采用 in 方法 #判断字典中某个键是否存在 arr = {"int":"整数","float":"浮点&quo ...
- python，pycharm环境安装
1.1 python3安装四部曲 第一步下载 地址 https://www.python.org/downloads/windows/ 第二步安装 1. 第三步 配置坏境变量 第四步 测试是否完成安装 ...
- vue中如何去掉空格
一.问题 vue中当用户提交表单时,有的数据需要去掉前后空格然后再向后端发送. 二.解决方法 首先可以使用v-model.trim这个v-model修饰符去解决它,但是当用户输入\u200B时,这个方 ...
- 关于encodeURI() 踩的坑
情景: 列表页跳转详情页,需要把列表页的数据带到详情页直接展示,思路是在路径后面加?传参,然后再在详情页获取url的参数. 为了以防中文乱码什么的所以先试用encodeURI转码再decodeURI解 ...
- C# System.Reflection （反射）
在使用.NET创建的程序或组件时,元数据(metadata)和代码(code)都存储于“自成一体”的单元中,这个单元称为装配件.我们可以在程序运行期间访问这些信息. 在System.Reflectio ...