Vue --- 基础练习
1.有红，黄，蓝三个按钮，以及一个矩形框，点击不同的按钮，矩形框的颜色会被切换为指定的颜色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>点击变色</title>
<script src="Vue/vue.js"></script>
<style>
.d1{
width: 150px;
height: 150px;
background-color: red;
}
.d2{
width: 150px;
height: 150px;
background-color: blue;
}
.d3{
width: 150px;
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div id="d0">
<p @click="f1" id="d1">红色</p>
<p @click="f2" id="d2">蓝色</p>
<p @click="f3" id="d3">黄色</p>
</div>
<div id="d4" :class="c1" >
</div>
<script>
let app = new Vue({
el:'#d4',
data:{
c1:'d1',
},
});
let color = new Vue({
el:'#d0',
data:{
d1:'d1',
d2:'d2',
d3:'d3'
},
methods:{
f1(){
app.c1 = 'd1'
},
f2(){
app.c1 = 'd2'
},
f3(){
app.c1 = 'd3'
},
}
})
</script>
</body>
</html>
2.有一个矩形框，点击框本身，记录点击次数，会随着点击次数的增加依次变换颜色
<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<title>点击变色</title>
<script src="Vue/vue.js"></script>
<style>
.d1{
width: 150px;
height: 150px;
background-color: red;
}
.d2{
width: 150px;
height: 150px;
background-color: blue;
}
.d3{
width: 150px;
height: 150px;
background-color: yellow;
}
</style>
</head>
<body>
<div>
<p id="d1">{{ count }}</p>
</div>
<div :class="c1" id="d2" @click="f2" id="d2"></div>
<script>
let app = new Vue({
el:'#d1',
data:{
cl:'d1',
c2:'d2',
c3:'d3',
count:1
},
});
let app1 = new Vue({
el:'#d2',
data:{
c1:'d1',
count1:0
},
methods:{
f2(){
app.count = app.count + 1;
if(app.count == 3){
app1.c1='d2'
}
if(app.count == 5){
app1.c1 = 'd3'
}
if(app.count == 7){
app1.c1 = 'd1';
app.count = 1
}
}
}
})
</script>
</body>
</html>
Vue --- 基础练习的更多相关文章
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十八║Vue基础: 指令(下)+计算属性+watch
回顾 今天来晚辣,给公司做了一个小项目,一个瀑布流+动态视频控制的DEMO,有需要的可以联系我,公司的项目就不对外展示了(一个后端程序员真的要干前端了哈哈哈). 书接上文,昨天正式的开始了Vue的代码 ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 十九║Vue基础: 样式动态绑定+生命周期
回顾 哈喽大家好,前后端分离系列文章又开始了,今天周一,还是感谢大家花时间来观看我写的博客,周末呢,没有写文章,但是也没有闲着,主要是研究了下遗留问题,看过之前文章的应该知道,之前的在AOP使用Red ...
- 从壹开始前后端分离 [ Vue2.0+.NET Core2.1] 二十║Vue基础终篇：传值+组件+项目说明
缘起 新的一天又开始啦,大家也应该看到我的标题了,是滴,Vue基础基本就到这里了,咱们回头看看这一路,如果你都看了,并且都会写了,那么现在你就可以自己写一个Demo了,如果再了解一点路由,ajax请求 ...
- python 全栈开发，Day89(sorted面试题,Pycharm配置支持vue语法,Vue基础语法,小清单练习)
一.sorted面试题 面试题: [11, 33, 4, 2, 11, 4, 9, 2] 去重并保持原来的顺序 答案1: list1 = [11, 33, 4, 2, 11, 4, 9, 2] ret ...
- Vue 基础精讲
Vue 基础精讲 Vue 官方文档:https://cn.vuejs.org/v2/guide/ VUE 实例 每个组件都是一个 vue 的实例. 一个 vue 项目是由实例组成的. vue 实例上有 ...
- Vue基础以及指令
Vue 基础篇一 一.Vue框架介绍 之前大家学过HTML,CSS,JS,JQuery,Bootstrap,现在我们要学一个新的框架Vue~ Vue是一个构建数据驱动的web界面的渐进式框架. 目 ...
- 2-5 vue基础语法
一.vue基础语法 语法: {{msg}} html赋值: v-html="" 绑定属性: v-bind:id="" 使用表达式: {{ok? "ye ...
- Vue 1-- ES6 快速入门、vue的基本语法、vue应用示例，vue基础语法
一.ES6快速入门 let和const let ES6新增了let命令,用于声明变量.其用法类似var,但是声明的变量只在let命令所在的代码块内有效. { let x = 10; var y = 2 ...
- vue基础知识之vue-resource/axios
Vue基础知识之vue-resource和axios(三) vue-resource Vue.js是数据驱动的,这使得我们并不需要直接操作DOM,如果我们不需要使用jQuery的DOM选择器,就没 ...
- Vue基础及脚手架环境搭建
From:http://www.jianshu.com/p/dc5057e7ad0d 一.vue基础 “Vue2.0”跟俺一起全面入坑 01 “Vue2.0”跟俺一起全面入坑 02 “Vue2.0”跟 ...
随机推荐
- c++ pipe实现父子进程通信
1.父子进程通信pipe编程流程 -创建管道 -设置进程的输出到管道 -创建进程 -关闭管道写句柄 -读管道读句柄,把数据读到一个buffer里 2.注意事项 -读管道数据的时候,一定要关闭写句柄: ...
- Spring Boot与mybatis整合
完整的项目截图 一:pom依赖 新增ojdbc6及batis-spring-boot-starter依赖 <dependency> <groupId>com.oracle< ...
- redis-集群（codis和Cluster）
codis 和 cluster 对比图: codis工作图: cluster工作图:(去中心化)
- swagger2 404
swagger2 404 正确配置swagger后(配置),出现404问题. 如图: 分析原因 我是在配置完成swagger后正常使用过一段时间的,然后检查了相关配置项的代码,没有被改动过.可以确定s ...
- k8s--yml文件
- 必须修改getdate()格式，判断是否处于两个日期之间
), ) ), )<= 周次结束日期 ), ) -- 这样的格式结果为:2019-09-01 --如果不进行转换,查出来含有日期和时间,否则两个边界无法查询出来
- string 转stream和stream转string
string test = “Testing 1-2-3″; // convert string to stream MemoryStream stream = new MemoryStream(); ...
- 学习笔记之盘一盘 Python 系列 1 & 2 - 入门篇
盘一盘 Python 系列 1 & 2 - 入门篇 https://mp.weixin.qq.com/s?__biz=MzIzMjY0MjE1MA==&mid=2247486473&a ...
- Linux“七大蠢”收录
这个系列的文章,前段时间在微信公共平台(阿里技术嘉年华)上看过,写得很好. Linux"七大蠢"之一:万般皆文本 Linux"七大蠢"之二:处处有脚本 Linu ...
- Spring IOC 总结
IOC 简介 IOC是(Inversion of Control,控制反转)的简写.Spring提供IOC容器,将对象间的依赖关系交由Spring进行控制,避免硬编码所造成的的过度程序耦合.它由DI( ...