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一样还有另外两个 定义的 ...
随机推荐
- Vue_声明周期
Vue生命周期 在vue2.0的时候,声明钩子发生了改变,具体有八个 <!-- HTML部分 --> <div id="app"> <div>{ ...
- AE安装部署以及监测ArcEngine runtime 9.3是否安装
目的:用ArcEngine9.3开发项目以后,用Visual Studio2008打包工具打包: 同时监测别的机器上是否有ArcEngine Runtime或者Desktop的支持. 解决方案: 1. ...
- Flex带CheckBox的Tree（修改ItemRenderer）
此文代码参考了:http://summerofthatyear-gmail-com.iteye.com/blog/326302 在此表示感谢! 前文提到了,实现带CheckBox的Tree有两种方法: ...
- Android开源项目和轮子
推荐查看Github最全面的Android开源项目汇总 功能框架 数据库 ORMLite框架 greenDaoMaster框架 Xutils的DButils ORMLitehe和greenDaoMas ...
- nslookup命令查找域名
了解 DNS 域名服务 熟悉使用 nslookup 查找 DNS 服务器上登记的域名,记录几次查询的结果, 及服务器的 ip. 1. 某个子域下的一部分主机的名字- IP 地址对应关系,如 flame ...
- Python文件和数据格式化（教程）
文件是一个存储在副主存储器的数据序列,可包含任何数据内容. 概念上,文件是数据的集合和抽象,类似的,函数是程序的集合和抽象. 用文件形式组织和表达数据更有效也更加灵活. 文件包括两种形式,文本文件和二 ...
- PHP安装扩展补充说明
上一篇文章中用到了,php的sodium扩展,那么如何安装PHP扩展呢?基于我之前踩过的一些坑,大致整理了几种安装php扩展的方法.已安装sodium为例 1.先做点准备工作,安装sodium依赖 r ...
- Spring 框架基础(05)：事务管理机制，和实现方式
本文源码:GitHub·点这里 || GitEE·点这里 一.Spring事务管理 1.基础描述 Spring事务管理的本质就是封装了数据库对事务支持的操作,使用JDBC的事务管理机制,就是利用jav ...
- node.js多进程架构
node.js是单进程应用,要充分利用多核cpu的性能,就需要用到多进程架构. 作为web服务器,不能多个进程创建不同的socket文件描述符去accept网络请求, 有经验的同学知道,如果端口被占用 ...
- TensorFlow学习笔记——LeNet-5（训练自己的数据集）
在之前的TensorFlow学习笔记——图像识别与卷积神经网络(链接:请点击我)中了解了一下经典的卷积神经网络模型LeNet模型.那其实之前学习了别人的代码实现了LeNet网络对MNIST数据集的训练 ...