Vue 小练习01
- 有红, 黄, 蓝三个按钮, 以及一个200X200px的矩形box, 点击不同的按钮, box的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p :style="myStyle"></p>
<button :style="{backgroundColor: bgc1}" @click="f1">按钮一</button>
<button :style="{backgroundColor: bgc2}" @click="f2">按钮二</button>
<button :style="{backgroundColor: bgc3}" @click="f3">按钮三</button>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
bgc1: 'red',
bgc2: 'yellow',
bgc3: 'blue',
myStyle: {
width: '200px',
height: '200px',
backgroundColor: 'black'
}
},
methods: {
f1() {
this.myStyle.backgroundColor = this.bgc1
},
f2() {
this.myStyle.backgroundColor = this.bgc2
},
f3() {
this.myStyle.backgroundColor = this.bgc3
},
}
})
</script>
</body>
</html>
- 一个200X200px的矩形box, 点击box本身, 记录点击次数, 1次box变为粉色, 2次变为绿, 3次变为蓝色, 4次重新回到粉色, 依次类推
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="d1">
<p :style="myStyle" @click="f1">{{ counter }}</p>
</div>
<script src="vue/vue.js"></script>
<script>
new Vue({
el: '#d1',
data: {
counter: 0,
bgc1: 'pink',
bgc2: 'green',
bgc3: 'cyan',
myStyle: {
width: '200px',
height: '200px',
backgroundColor: 'black'
}
},
methods: {
f1() {
this.counter += 1;
if (this.counter % 3 === 1) {
this.myStyle.backgroundColor = this.bgc1
}else if (this.counter % 3 === 2) {
this.myStyle.backgroundColor = this.bgc2
}else {
this.myStyle.backgroundColor = this.bgc3
}
}
}
})
</script>
</body>
</html>
Vue 小练习01的更多相关文章
- vue小例子-01
1.在components下建一个 2.代码如下: <template> <!--1.业务是开始有一组数据,序号,姓名,性别,年龄,操作(删除) 2.有三个输入框输入姓名,性 ...
- Vue.js起手式+Vue小作品实战
本文是小羊根据Vue.js文档进行解读的第一篇文章,主要内容涵盖Vue.js的基础部分的知识的,文章顺序基本按照官方文档的顺序,每个知识点现附上代码,然后根据代码给予个人的一些理解,最后还放上在线编辑 ...
- 一个基于ES6+webpack的vue小demo
上一篇文章<一个基于ES5的vue小demo>我们讲了如何用ES5,vue-router做一个小demo,接下来我们来把它变成基于ES6+webpack的demo. 一.环境搭建及代码转换 ...
- 一个基于ES5的vue小demo
由于现在很多vue项目都是基于ES6开发的,而我学vue的时候大多是看vue官网的API,是基于ES5的,所以对于刚接触项目的我来说要转变为项目的模块化写法确实有些挑战.因此,我打算先做一个基于ES5 ...
- Vue小项目二手书商城：（四）详情页和购物车（emit、prop、computed）
实现效果: 点击对应商品,对应的商品详情页出现,详情页里面还有“Add to cart”按钮和“×”退出按钮. 点击“Add to cart”可以将商品加入购物车,每件商品只能添加一次,如果把购物车的 ...
- Vue小项目二手书商城：（三）前端渲染数据
实现内容: axios取到的数据在前端使用(父子组件各自应该怎么使用) 一.简单使用(在哪取在哪用) 1.在App.vue中script中加上data(data专属于当前组件,父子组件传参通过prop ...
- Vue小项目二手书商城：（二）axios前后端数据交互
实现内容: 写路由接口(express) axios取数据 一.写接口 1.我们要在前端取到后端的数据(之前写的data.json)可以用vue-resourse或者用axios,在vue2之后官方就 ...
- Vue小项目二手书商城：（一）准备工作、组件和路由
本项目基于vue2.5.2,与低版本部分不同之处会在(五)参考资料中提出 完整程序:https://github.com/M-M-Monica/bukesi 实现内容: 资源准备(mock数据) 组件 ...
- VUE小练习(按钮颜色，数组映射)
VUE小练习(按钮颜色,数组映射) ## 1.有红.黄.蓝三个按钮,以及一个200x200矩形框box, 点击不同的按钮,box的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...
随机推荐
- 视频来了！Visual Studio Online 东半球首秀 @ .NET Conf 2019
2019 年 11 月 9 日,.NET Conf 2019 中国峰会于上海中谷小南国花园酒店举行,全国的 .NET 大咖相聚上海. 这次我演讲的主题是<Visual Studio Code — ...
- 201871010119-帖佼佼《面向对象程序设计（java）》第四周学习总结
项目 内容 这个作业属于哪个课程 https://www.cnblogs.com/nwnu-daizh/ 这个作业的要求在哪里 https://www.cnblogs.com/nwnu-daizh ...
- rsync实现服务器之间同步目录文件
一般情况下 服务环境一般有三种 dev 开发环境 test 测试环境 prod 生产环境 环境多了,不可避免的事是一些重复的操作,部署什么的 能不能在开发环境打包后,直接同步到测试环境呢?(毕竟重 ...
- Elasticsearch系列---初识搜索
概要 本篇主要介绍搜索的报文结构含义.搜索超时时间的处理过程,提及了一下多索引搜索和轻量搜索,最后将精确搜索与全文搜索做了简单的对比. 空搜索 搜索API最简单的形式是不指定索引和类型的空搜索,它将返 ...
- quick start guide for XMEGA ADC
This is the quick start guide for the Analog to Digital Converter (ADC), with step-by-step instructi ...
- 创建基于ASP.NET core 3.1 的RazorPagesMovie项目（一）-创建和使用默认的模板
声明:参考于asp.net core 3.1 官网(以后不再说明) 本教程是系列教程中的第一个教程,介绍生成 ASP.NET Core Razor Pages Web 应用的基础知识. 在本系列结束时 ...
- SpringCloud-使用熔断器仪表盘监控熔断
场景 SpringCloud-使用熔断器防止服务雪崩-Ribbon和Feign方式(附代码下载): https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/ ...
- 原生JS实现移动端轮播图
功能描述: 自动无缝轮播图片,底部小圆点跟图片保持一致:手指左右移动轮播图,移动距离大于50px播放下一张(或上一张),小于50px则回弹 具体功能实现: 1.定时器 自动轮播图片 先声明一个inde ...
- Fragment中不能使用自定义带参构造函数
通过Fragment自定义的静态方法将值从activity传到fragment中,然后就想到这样不是多次一举吗,为什么不直接写个带参构造函数将值传过去呢?试了一下,发现Fragment有参构造函数竟然 ...
- Jmeter录制后的脚本调优
当我们通过badboy或者HTTP代理服务器的方式录制的脚本,会发现脚本杂乱无章,图片.css.html以及各种我们不关心的脚本,因此就需要针对录制后的脚本进行调优 1.去除图片.html/css等不 ...