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一样还有另外两个 定义的 ...
随机推荐
- 建筑行业的新起之秀---BIM
近年来,BIM在国家在建筑行业的推进下逐渐走近人们的视线,而且BIM技术是作为建筑领域的一项新技术行业发展的越来越好,在很多的建筑场景都用到了BIM建模.施工.运维以及BIM+GIS等以BIM为 ...
- "PSP助手”微信小程序宣传视频链接及内容介绍
此作业的要求参见[https://edu.cnblogs.com/campus/nenu/2019fall/homework/8677] 队名:扛把子组 组长:迟俊文 组员:刘信鹏 韩昊 宋晓丽 梁梦 ...
- 从零开始在ubuntu上配置深度学习开发环境
从零开始在ubuntu上配置深度学习开发环境 昨天一不小心把原来配置好的台式机的开发环境破坏了,调了半天没有调回来,索性就重装一次ubuntu系统.这篇文章主要记录一个简单的.‘傻瓜式’教程. 一.U ...
- Towards Universal Object Detection by Domain Attention
论文及代码 论文地址:https://arxiv.org/abs/1904.04402 代码:http://www.svcl.ucsd.edu/projects/universal-detection ...
- 来理解undefined 和 null 区别
之前虽然也知道这两个之间的区别,但是让我描述的话,感觉上还是说的不是很清楚.今天也详细看了一次这个知识点,现在来说说这两者间的区别. null: Null类型,代表“空值”,代表一个空对象指针,使用t ...
- 2019-11-20:xss学习笔记
xxe漏洞防御使用开发语言提供的禁用外部实体的方法phplibxml_disable_entity_loader(true); 卢兰奇对象模型,bom由于现代浏览器实现了js交互性方面的相同方法和属性 ...
- scss--函数 (Functions)--unit
(Sass::Script::Value::String) unit($number) Returns the unit(s) associated with a number. Complex un ...
- Dubbo面试八连问，这些你都能答上来吗？
Dubbo是什么? Dubbo能做什么? Dubbo内置了哪几种服务容器? Dubbo 核心的配置有哪些? Dubbo有哪几种集群容错方案,默认是哪种? Dubbo有哪几种负载均衡策略,默认是哪种? ...
- 折腾笔记-计蒜客T1167AC记
查看原题 原题地址 思路: 判断回文+判断质数 初步代码: #include <bits/stdc++.h> using namespace std; bool prime(int n) ...
- 关于小码哥kylin
技术格言: 用双手改变人生,用代码改变世界! 个人网站:http://www.isainttech.com QQ:56619556 Email:dragonsaint@qq.com 微信:kylin1 ...