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一样还有另外两个 定义的 ...
随机推荐
- IDEA用Maven连接MySQL的jdbc驱动，并操作数据库
1.在IDEA里创建Maven项目 1.1.点击Create New Project 1.2.选择Maven,JDK这里用的是1.8,点击Next 1.3.填入“组织名”.“项目名”,版本是默认 ...
- Fabric1.4源码解析：Peer节点启动过程
看一下Peer节点的启动过程,通常在Fabric网络中,Peer节点的启动方式有两种,通过Docker容器启动,或者是通过执行命令直接启动. 一般情况下,我们都是执行docker-compose -f ...
- Java多线程编程(5)--线程间通信
一.等待与通知 某些情况下,程序要执行的操作需要满足一定的条件(下文统一将其称之为保护条件)才能执行.在单线程编程中,我们可以使用轮询的方式来实现,即频繁地判断是否满足保护条件,若不满足则继续判断 ...
- 【日常错误】spring-boot配置文件读取不到
最近在用spring-boot做项目时,遇到自定义的配置文件无法读取到的问题,通过在appcation.java类上定义@PropertySource(value = {"classpath ...
- Spring（Bean）6
生命周期构造 --->set--->Bean init前后执行 (新创建 类) public class MyBeanPostProcesser implements BeanPostPr ...
- 从壹开始 [ Design Pattern ] 之三 ║ 工厂模式 与 小故事
编者按: 定义一个用于创建对象的接口,让子类决定实例化哪一个类.工厂方法使得一个类的实例化延迟到子类. 工厂模式,是迄今为止,使用最多,最广泛的设计模式之一,它的身影几乎出现在每一个框架和个人代码之中 ...
- for源码实现
for源码实现 我们知道,java的while和for基本上是实现一样的功能,这样会不会有一点缺点,同时java的迭代器显得尤为的麻烦. python的for和while就不同了,在实现迭代的功能的情 ...
- 如何重置IE浏览器
1.退出所有程序,包括 Internet Explorer.单击“开始”.在“开始搜索”框中键入 inetcpl.cpl 命令,然后按回车键打开“Inetnet 选项”对话框. 2.单击“高级”选项卡 ...
- 顺序队列与链式队列--C语言实现
关于队列,因为我自己在平时使用不多,所以在这里直接将队列的两种存储方式放在一起,作为一篇随笔,这两份代码均可直接运行,亲测.注释写的应该也算比较详细了,就不过多的解释了 顺序队列 #include&l ...
- VMware下载及安装使用方法
一.VMware的介绍: 虚拟机(Virtual Machine)指通过软件模拟的具有完整硬件系统功能的.运行在一个完全隔离环境中的完整计算机系统.DesktopVirtualBox,虚拟系统通过生成 ...