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的颜色会被切换成指定的颜色 ''' 解法一:我本来的思路,把三个按钮绑定 ...
随机推荐
- 【Web技术】276- WebView缓存原理分析和应用
前言 混合式开发,在产品体验以及页面加载速度的体验上已经非比以往的.今日早读文章由@unclechen分享. 正文从这开始- 一.背景 现在的App开发,或多或少都会用到Hybrid模式,到了WebV ...
- NodeJS4-1静态资源服务器实战_实现访问获取里面的内容
.gitignore 匹配模式前 / 代表项目根目录 匹配模式最后加 / 代表是目录 匹配模式前加 ! 代表取反 * 代表任意一个字符 ? 匹配任意一个字符 ** 匹配多级目录 统一代码风格配置可以用 ...
- CCF-CSP题解 201812-3 CIDR合并
题目想求与给定前缀列表等价的包含IP前缀数目最少的前缀列表. 首先是怎么存储前缀列表.用一个long long存储IP地址,再存一个前缀长度,封装在一个结构体里\(<ipNum, len> ...
- git 知识，适合新手 滤清思路
1,密钥 (公钥和私钥) @ 公钥放在服务器上(说白了这里的服务器就是远程仓库, 就是谁建立的远程仓库这个公钥就放在他的ssh设置那) @ 私钥 放在本地就行,不用动,就是你生产密钥的.ssh 文件里 ...
- three.js 制作太阳系统
最近学了three.js,想拿来练练手,喜欢宇宙,于是亲手撸代码来完成这个,为了更真实,于是查了一些相关资料.1. 距离太阳由近及远分别是[水星,金星,地球,火星,木星,土星,天王星,海王星]2. 他 ...
- Nginx的配置文件位置以及组成部分结构讲解
场景 Ubuntu Server 16.04 LTS上怎样安装下载安装Nginx并启动: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/detai ...
- 通知advice
基于注解的Spring AOP开发,来自https://www.cnblogs.com/junzi2099/p/8274813.html 1.定义目标类接口和实现类 2.编写Spring AOP的as ...
- IT兄弟连 HTML5教程 CSS3属性特效 文字描边
用CSS3实现的文字描边效果,一个CSS3文字特效实例,字体可以自己随意改,字体颜色也可以自己改.IE9以下浏览器无效果,所以提醒大家测试时候要使用Google Chrome.-webkit-text ...
- Mysql - 高可用方案之MM+Keepalived
一.概述 本文将介绍mysql的MM+Keepalived方案.该方案由两个mysql服务器组成,这两个mysql互为主备.其中一台主作为写服务器,另一台主作为读服务器.通过keepalived软件管 ...
- 在cnetos7上搭建mysql主从服务
本文主要是介绍在centos上搭建mysql的主从服务器.如果没有搭建过的,可以查看我以前的博客,里面有详细的安装centos和在centos上安装mysql的说明. 一.安装从虚拟机: 1.右键—& ...