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一样还有另外两个 定义的 ...
随机推荐
- .NET core3.0 使用Jwt保护api
摘要: 本文演示如何向有效用户提供jwt,以及如何在webapi中使用该token通过JwtBearerMiddleware中间件对用户进行身份认证. 认证和授权区别? 首先我们要弄清楚认证(Auth ...
- 用图解&&实例讲解php是如何实现websocket实时消息推送的
WebSocket是 HTML5 开始提供的一种在单个 TCP 连接上进行全双工通讯的协议. 以前的推送技术使用 Ajax 轮询,浏览器需要不断地向服务器发送http请求来获取最新的数据,浪费很多的带 ...
- Python练习100题
Python练习100题 题目:有1.2.3.4个数字,能组成多少个互不相同且无重复数字的三位数?都是多少? #Filename:001.py cnt = 0#count the sum of res ...
- C#音频截取与原文匹配2：使用ffmpeg处理音频文件
ffmpeg获取音频时间 ffmpeg转换音频格式(单声道,16000hz,16bit wav) ffmpeg截取音频 不知道是不是错觉,感觉ffmpeg比NAudio要快啊~ 那么这就是第二个版本 ...
- Java大神带你领略queue的风采
作为数据结构中比较常见的类型,你足够了解队列(queue)吗?从今天开始,我将为你讲解关于队列(queue)的一切,包括概念.类型和具体使用方法,如果你对此足够感兴趣,赶快来加入我们,我将同你一起探索 ...
- 等待资源(wait_resource)解码
在调查阻塞或死锁时,你可能会遇到等待资源(wait_resource),通常等待的资源是Page或Key: waitresource=“PAGE: 6:3:70133 “waitresource=“K ...
- 搭建nextcloud私有云存储网盘
简介: 搭建个人云存储一般会想到ownCloud,堪称是自建云存储服务的经典.而Nextcloud是ownCloud原开发团队打造的号称是“下一代”存储. 真正试用过后就由衷地赞同这个Nextclou ...
- 【Android - IPC】之使用文件共享实现IPC
文件共享是一种非常不错的IPC方式,即两个进程可以通过读/写同一个文件来交换数据.和Windows系统不同,Android系统是基于Linux的,这使得并发读/写文件的操作可以没有限制地进行,甚至两个 ...
- windows下安装python numpy+scipy+matlotlib+scikit-learn等流行库
(1)请不要直接使用 pip install scikit-learn pip install Numpy pip install Scipy pip install Matplotlib 命令安 ...
- matlab 降维工具 转载【https://blog.csdn.net/tarim/article/details/51253536】
降维工具箱drtool 这个工具箱的主页如下,现在的最新版本是2013.3.21更新,版本v0.8.1b http://homepage.tudelft.nl/19j49/Matlab_Toolb ...