练习题 vue_01：
练习题: vue_01
点击事件控制标签颜色：
1、有 红、黄、蓝 三个按钮，以及一个200x200矩形框box，点击不同的按钮，box的颜色会被切换为指定的颜色
# test_1.html
<body>
<div id="app">
<form action="" style="margin: 20px;">
<p @click="tag" :style="{width: w,height: h, backgroundColor: bgc }"></p>
<input type="button" value="红" @click="tag($event,'red')">
<input type="button" value="黄" @click="tag($event,'yellow')">
<input type="button" value="蓝" @click="tag($event,'blue')">
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
new Vue({
el:'#app',
data:{
h: '200px',
w: '200px',
bgc: 'red'
},
methods:{
tag (a,b) {
this.bgc = b
}
}
})
</script>
点击次数控制标签的样式：
--》实现点击次数，变换页面标签的颜色
2、有一个200x200矩形框wrap，点击wrap本身，记录点击次数，如果是1次wrap为pink色，2次wrap为green色，3次wrap为cyan色，4次重新回到pink色，依次类推
#test_2.html
<body>
<div id="app">
<form action="#" style="margin: 20px;">
<p @click="tag" :style="{width: w,height: h, backgroundColor: bgc}"></p>
</form>
</div>
</body>
<script src="js/vue.js"></script>
<script>
let num = 0;
new Vue({
el:'#app',
data:{
h: '200px',
w: '200px',
bgc: 'yellow'
},
methods:{
tag () {
num += 1;
if (num==1){
this.bgc = 'pink'
}else {if (num==2){
this.bgc = 'green'
}else {
this.bgc = 'cyan';
num = 0
}}
}
}
})
</script>
周期性实现标签的旋转变色：
3: 周期性实现颜色的旋转变色
1、如图：图形初始左红右绿，点击一下后变成上红下绿，再点击变成右红左绿，再点击变成下红上绿，依次类推
2、可以将图编程自动旋转
# test_03.html
<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="js/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>
每日一题：
http协议，https与http的区别：
前端页面布局的方式
框架内orm的功能：
1.什么是http协议，https与http的区别
http: 前后端交互的归范（协议） （应用层）
tcp : 传输层 (传输文件)
特点：无状态 ， 无连接 ， 基于tcp , [基于请求，在响应（）]，
https: 在http协议之上 + SSL 安全认证
2.写出三种前端页面布局的方式（代码或描述都行）
1.流式布局 ： 页面控制布局 -（）
2.响应布局（思想）
3.盒模型布局 （）
4.浮动布局 ()
5.定位布局 (定位 )
--详情页->https://www.cnblogs.com/soyxiaobi/p/9594557.html
3.简述一下你知道的orm
一种对应关系映射，将表，表字段，表数据，通过生成对象，点方法的方式获取，修改，更新，删除 数据
每日感悟：
失败是偶然 ， 成功是必然 ！！！！
练习题 vue_01：的更多相关文章
- Linux基础练习题(二)
Linux基础练习题(二) 1.复制/etc/skel目录为/home/tuer1,要求/home/tuser1及其内部文件的属组和其它用户均没有任何访问权限. [root@www ~]# cp -r ...
- shell 脚本之 shell 练习题汇总
整理了一些 shell 相关的练习题,记录到这里. 1. 请按照这样的日期格式 xxxx-xx-xx 每日生成一个文件,例如:今天生成的文件为 2013-09-23.log, 并且把磁盘的使用情况写到 ...
- MySQL练习题
MySQL练习题 一.表关系 请创建如下表,并创建相关约束 二.操作表 1.自行创建测试数据 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 3.查询平均成绩大于60分的同学的学号和平均成 ...
- MySQL练习题参考答案
MySQL练习题参考答案 2.查询“生物”课程比“物理”课程成绩高的所有学生的学号: 思路: 获取所有有生物课程的人(学号,成绩) - 临时表 获取所有有物理课程的人(学号,成绩) - 临时表 根据[ ...
- mysql练习题-查询同时参加计算机和英语考试的学生的信息-遁地龙卷风
(-1)写在前面 文章参考http://blog.sina.com.cn/willcaty. 针对其中的一道练习题想出两种其他的答案,希望网友给出更多回答. (0) 基础数据 student表 +-- ...
- 【UOJ#228】基础数据结构练习题 线段树
#228. 基础数据结构练习题 题目链接:http://uoj.ac/problem/228 Solution 这题由于有区间+操作,所以和花神还是不一样的. 花神那道题,我们可以考虑每个数最多开根几 ...
- 【Java EE 学习 28 下】【Oracle面试题2道】【Oracle练习题3道】
一.已知程序和数据 create table test1 (id int primary key, name ), money int); ,); ,); ,); ,); 要求根据下图写出相应的sql ...
- 从一道NOI练习题说递推和递归
一.递推: 所谓递推,简单理解就是推导数列的通项公式.先举一个简单的例子(另一个NOI练习题,但不是这次要解的问题): 楼梯有n(100 > n > 0)阶台阶,上楼时可以一步上1阶,也可 ...
- 《java编程思想》读书笔记 暂停一段时间，改为上面的练习题
发现个很尴尬的现象.我一天实在看得太快了...全写下 写博客都得一晚上.. 之前因为是第一次看这么厚的书,别人都说很难,以为会看很慢的.然而,已经完全学过Java的 我感觉没啥压力,越看越快....第 ...
随机推荐
- 解决 ubuntu 开机卡死在输入密码界面 && 键盘鼠标失灵！!
近期不知安装了什么package,导致 ubuntu 开机后键盘鼠标一直没法用,刚开始以为是 ubuntu 桌面环境崩溃了,后来发现系统能显示连接到网络.时间也在运行,那应该就是键盘鼠标失灵了. 网上 ...
- Anaconda入门教程【快速掌握】
Anaconda 使用指南 概述 很多学习python的初学者甚至学了有一段时间的人接触到anaconda或者其他虚拟环境工具时觉得无从下手, 其主要原因就是不明白这些工具究竟有什么用, 是用来做什么 ...
- 短的 Guid 帮助类
直接贴代码了: /// <summary> /// 短的 Guid 帮助类 /// </summary> public class ShortGuidHelper { #reg ...
- 初探云原生应用管理之：聊聊 Tekton 项目
[编者的话]“人间四月芳菲尽,山寺桃花始盛开.” 越来越多专门给 Kubernetes 做应用发布的工具开始缤纷呈现,帮助大家管理和发布不断增多的 Kubernetes 应用.在做技术选型的时候,我们 ...
- 【JS】---4用JS获取地址栏参数方法
用JS获取地址栏参数方法 // 方法一:采用正则表达式获取地址栏参数:( 强烈推荐,既实用又方便!) function GetQueryString(name) { var reg = new Reg ...
- Docker Hub 使用初探
Docker Hub 使用初探 —— 魏刘宏 2019.10.26 容器的话题越来越热,今天我也来试试容器的使用,我们以 Docker Hub 为例. Docker Hub 官网为 https://h ...
- 练手WPF（二）——2048游戏的简易实现（下）
接着上一篇继续~~~ 6.动画显示增加分数 /// <summary> /// 动画显示增加得分 /// </summary> /// <param name=" ...
- vscode搜索所有文件夹中所有文件的方法
最近在看opencv相关的内容,看到画图这一部分时,提示我 这些代码都来自OpenCV代码的sample文件夹. 按照他的提示,我打开了相应的文件夹,却发现,so many 文件 and 文件夹,这 ...
- Linux磁盘系统——管理磁盘的命令
Linux磁盘系统——管理磁盘的命令 摘要:本文主要学习了Linux系统中管理磁盘的命令,包括查看磁盘使用情况.磁盘挂载相关.磁盘分区相关.磁盘格式化等操作. df命令 df命令用于显示Linux系统 ...
- E203译码模块(3)
下面的代码译码出指令的立即数,不同的指令有不同的立即数编码形式. //I类型指令的imm,[31:20],符号位扩展成32位. wire [31:0] rv32_i_imm = { {20{rv32_ ...