VUEday01
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
}
.red{
background-color: red;
}
.yel{
background-color: yellow;
}
.blue{
background-color: blue;
}
</style>
</head>
<body>
<div id="d1">
<div :class="['box',{red:is_true,yel:is_true1,blue:is_true2}]" ></div>
<button @click="f1">{{red}}</button>
<button @click="f2">{{yel}}</button>
<button @click="f3">{{blue}}</button>
</div>
</body>
<script src="bootstrap-3.3.7-dist/vue.min.js"></script>
<script>
new Vue({
el:'#d1',
data:{
is_true:false,
is_true1:false,
is_true2:false,
red:'红色',
yel:'黄色',
blue:'蓝色',
},
methods:{
f1(){
this.is_true=1;
this.is_true1=0;
this.is_true2=0;
},
f2(){
this.is_true1=1;
this.is_true=0;
this.is_true2=0;
},
f3(){
this.is_true2=1;
this.is_true1=0;
this.is_true=0;
}
}
});
</script>
</html>
### 作业二：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
<style>
.box {
width: 200px;
height: 200px;
background-color: black;
}
.pink{
background-color: pink;
}
.green{
background-color: green;
}
.cyan{
background-color: cyan;
}
</style>
</head>
<body>
<div id="d2">
<div :class="['box',{pink:is_true,green:is_true1,cyan:is_true2}]" @click="f1($event)"></div>
</div>
</body>
<script src="bootstrap-3.3.7-dist/vue.min.js"></script>
<script>
new Vue({
el:'#d2',
data:{
is_true:false,
is_true1:false,
is_true2:false,
},
methods: {
f1(e){
let time=1;
if(e.detail===time){
this.is_true = 1;
this.is_true1 = 0;
this.is_true2 = 0;
console.log(time)
}if(e.detail===time+1){
this.is_true = 0;
this.is_true1 = 1;
this.is_true2 = 0;
}if (e.detail===time+2) {
this.is_true = 0;
this.is_true1 = 0;
this.is_true2 = 1;
}
}
}
})
</script>
</html>
VUEday01的更多相关文章
- vue---day01
1.let和const var 全局作用域和函数作用域 存在变量提升 其实是个bug 可以重复声明 let 块级作用域 不存在变量提升 不能重复声明 const 常量 和let一样还有另外两个 定义的 ...
随机推荐
- Spring Boot: Spring Doc生成OpenAPI3.0文档
1. 概述 公司正好最近在整理项目的文档,且文档对于构建REST API来说是至关重要的.在这篇文章中,我将介绍Spring Doc , 一个基于OpenAPI 3规范简化了Spring Boot 1 ...
- 将Swagger2文档导出为HTML或markdown等格式离线阅读
网上有很多<使用swagger2构建API文档>的文章,该文档是一个在线文档,需要使用HTTP访问.但是在我们日常使用swagger接口文档的时候,有的时候需要接口文档离线访问,如将文档导 ...
- AntDeploy一键发布netcore3.0Windows服务到远程服务器
*:first-child { margin-top: 0 !important; } .markdown-body>*:last-child { margin-bottom: 0 !impor ...
- Netty学习篇⑥--ByteBuf源码分析
什么是ByteBuf? ByteBuf在Netty中充当着非常重要的角色:它是在数据传输中负责装载字节数据的一个容器;其内部结构和数组类似,初始化默认长度为256,默认最大长度为Integer.MAX ...
- 【Luogu P1878】舞蹈课
Luogu P1878 事实上这道题并不难,但我真没弄懂我手写堆为什么过不了.所以 STL大法好!!! 基本思路 对于每一对相邻异性,将他们的舞蹈技术的差插入一个堆 通过维护这个小根堆,每次就可以取得 ...
- 折腾笔记-计蒜客T1167AC记
查看原题 原题地址 思路: 判断回文+判断质数 初步代码: #include <bits/stdc++.h> using namespace std; bool prime(int n) ...
- 2019年12月1日Linux开发手记
配置ubuntu摄像头: 1.设置→添加→usb控制器→兼容usb3.0 2.虚拟机→可移动设备→web camera→连接(断开主机) 3.查看是否配置成功,打开终端,输入: susb ls /de ...
- requests请求库
# coding = utf-8 """ 同urllib一样 requests 也是发送http请求的第三方库 兼容Python2和3 实现了http的绝大部分功能. 安 ...
- java JDK安装包的获取与安装
Java JDK 安装包获取和安装: JDK 1.8.211 官网下载地址 https://www.oracle.com/technetwork/java/javase/downloads/jdk8- ...
- CSS新特性之2D转换transform
transform是css3中具有颠覆性特征之一,可以实现元素的位移.旋转.缩放等效果 1.位移translate 1.1语法 transform: translate(x,y);//x,y分别表示x ...