VUE-练习
作业一:有红黄蓝三个按钮,以及一个200*200矩形box,点击不同按钮,box的颜色会被切换为指定的颜色
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title></title> <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script> </head> <body> <div id="app"> <div :style="div_style"></div> <div> <button v-on:click="changeColor('red')">{{ red }}</button> <button v-on:click="changeColor('yellow')">{{ yellow }}</button> <button v-on:click="changeColor('blue')">{{ blue }}</button> </div> </div> </body> <script src="Vue/vue.js"></script> <script> var app = new Vue({ el: '#app', data: { div_style: { width: "200px", height: "200px", backgroundColor: "black" }, red: '点击变红', yellow: '点击变黄', blue: '点击变蓝', }, methods: { changeColor(c) { this.div_style.backgroundColor = c; } } }) </script> </html>
作业二:有一个200*200的矩形wrap框,点击wrap本身,记录点击次数,如果是1次wrap为pink色,2次wrap为green,3次warp为cyan色,4次重新回到pink色,一次类推。
<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap{ width: 200px; height: 200px; color: white; font: bold 50px/200px 'STSong'; text-align: center; user-select: none; } </style></head><body><div id="app"> <div class="wrap" @click="actionFn" :style="{backgroundColor:bgColor}">{{content}}</div></div></body><script src="js/vue.js"></script><script> new Vue({ el:'#app', data:{ content:0, bgColor:'black', colorArr:['cyan','pink','green'], }, methods:{ actionFn(){ this.content ++; this.bgColor=this.colorArr[this.content % 3] } } }) </script> </html>
作业三:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .wrap { border: 3px solid black; width: 200px; height: 200px; border-radius: 50%; overflow: hidden; margin: 50px auto 0; position: relative; } .red, .green { width: 100px; height: 200px; position: absolute; } .red { background-color: red; } .green { background-color: green; } .l { width: 100px; height: 200px; left: 0; } .t { width: 200px; height: 100px; top: 0; } .r { width: 100px; height: 200px; right: 0; } .b { width: 200px; height: 100px; bottom: 0; } </style> </head> <body> <div id="app"> <div class="wrap" @click="actionFn"> <div class="red" :class="red_class"></div> <div class="green" :class="green_class"></div> <div></div> </div> </div> </body> <script src="js/vue.js"></script> <script> new Vue({ el: '#app', data: { count: 0, red_class: 'l', green_class: 'r', red_attr: ['l', 't', 'r', 'b'], green_attr: ['r', 'b', 'l', 't'], }, methods: { actionFn() { this.count ++; this.red_class = this.red_attr[this.count % 4]; this.green_class = this.green_attr[this.count % 4]; } } }) </script> </html>
第三题的第二问:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> </head> <body> <div id="app"> <form action="" style="margin: 20px;"> <p @click="tag" :style="{width: w,height: h, background: bgc, borderRadius:rad}"></p> </form> </div> </body> <script src="Vue/vue.js"></script> <script> let num = 0; let app = new Vue({ el:'#app', data:{ h: '200px', w: '200px', bgc: 'linear-gradient(to top, red 50%, green 50%)', //实现页面的过度(颜色) rad: '50%' }, methods:{ tag () { num += 1; if (num==1){ this.bgc = 'linear-gradient(to top, red 50%, green 50%)' // 控制方向 }else {if (num==2){ this.bgc = 'linear-gradient(to left, red 50%, green 50%)' }else {if (num==3) { this.bgc = 'linear-gradient(to bottom,red 50%, green 50%)' }else { this.bgc = 'linear-gradient(to right, red 50%, green 50%)'; num = 0 } }} } } }); function funcTest(){ window.setInterval(app.tag,500); // 按照指定的周期(以毫秒计)来调用函数 } window.onload = funcTest; // 页面加载完直接调用 该方法 </script> </html>
VUE-练习的更多相关文章
- Vue.js 和 MVVM 小细节
MVVM 是Model-View-ViewModel 的缩写,它是一种基于前端开发的架构模式,其核心是提供对View 和 ViewModel 的双向数据绑定,这使得ViewModel 的状态改变可以自 ...
- wepack+sass+vue 入门教程(三)
十一.安装sass文件转换为css需要的相关依赖包 npm install --save-dev sass-loader style-loader css-loader loader的作用是辅助web ...
- wepack+sass+vue 入门教程(二)
六.新建webpack配置文件 webpack.config.js 文件整体框架内容如下,后续会详细说明每个配置项的配置 webpack.config.js直接放在项目demo目录下 module.e ...
- wepack+sass+vue 入门教程(一)
一.安装node.js node.js是基础,必须先安装.而且最新版的node.js,已经集成了npm. 下载地址 node安装,一路按默认即可. 二.全局安装webpack npm install ...
- Vue + Webpack + Vue-loader 系列教程(2)相关配置篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ 使用预处理器 在 Webpack 中,所有的预处理器需要和一个相应的加载器一同使用.vue- ...
- Vue + Webpack + Vue-loader 系列教程(1)功能介绍篇
原文地址:https://lvyongbo.gitbooks.io/vue-loader/content/ Vue-loader 是什么? vue-loader 是一个加载器,能把如下格式的 Vue ...
- 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库
应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...
- Vue.js 2.0 和 React、Augular等其他框架的全方位对比
引言 这个页面无疑是最难编写的,但也是非常重要的.或许你遇到了一些问题并且先前用其他的框架解决了.来这里的目的是看看Vue是否有更好的解决方案.那么你就来对了. 客观来说,作为核心团队成员,显然我们会 ...
- 窥探Vue.js 2.0 - Virtual DOM到底是个什么鬼?
引言 你可能听说在Vue.js 2.0已经发布,并且在其中新添加如了一些新功能.其中一个功能就是"Virtual DOM". Virtual DOM是什么 在之前,React和Em ...
- 初探Vue
Vue.js(读音/vju:/,类似于view),是近来比较火的前端框架,但一直没有怎么具体了解.实现过,就知道个啥的MVVM啦,数据驱动啦,等这些关于Vue的虚概念. 由于最近,小生在公司中,负责开 ...
随机推荐
- Kafka主题体系架构-复制、故障转移和并行处理
本文讨论了Kafka主题的体系架构,讨论了如何将分区用于故障转移和并行处理. Kafka主题,日志和分区 Kafka将主题存储在日志中.主题日志分为多个分区.Kafka将日志的分区分布在多个服务器或磁 ...
- hbase与hdfs的交互
hdfs和hbase的交互,和写MapReduce程序类似,只是需要修改输入输出数据和使用hbase的javaAPI对其进行操作处理即可 public class HBaseToHdfs extend ...
- HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并)
layout: post title: HDU-6704 K-th occurrence (后缀自动机father树上倍增建权值线段树合并) author: "luowentaoaa&quo ...
- c++学习笔记之类模板
C++ 除了支持函数模板,还支持类模板(Class Template).函数模板中定义的类型参数可以用在函数声明和函数定义中,类模板中定义的类型参数可以用在类声明和类实现中.类模板的目的同样是将数据的 ...
- 1-python django的创建
一.Virtualenv(我的python环境是3.7) 1.虚拟环境创建(针对python版本和django的版本不一致的) 输入 pip install virtuallenv ,看到如下信息就是 ...
- 第二天:python数据类型及常用方法
数字类型 #1. 整型 a1 = 10 a2 = int(20) #2. 长整型(py2特有,py3废弃) b1 = 12345678901234567890 b2 = long(100) #3. 浮 ...
- dmesg、stat命令
一.dmesg:系统启动异场诊断. 语法: dmesg [选项] 参数: -C,-清除 清除环形缓冲区. -c,--read-clear ...
- redis 命令 setbit、bitcount、getbit、bitop
1.SETBIT key offset value 对 key 所储存的字符串值,设置或清除指定偏移量上的位(bit). 在redis中,存储的字符串都是以二级制的进行存在的. 举例: 设置一个 ke ...
- Springboot使用javaMail进行邮件发送
导入相关依赖 <!--邮件发送--> <dependency> <groupId>javax.mail</groupId> <artifactId ...
- 2 - sat 模板(自用)
2-sat一个变量两种状态符合条件的状态建边找强连通,两两成立1 - n 为第一状态(n + 1) - (n + n) 为第二状态 例题模板 链接一 POJ 3207 Ikki's Story IV ...