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”跟 ...
随机推荐
- linux配置ssh免密钥登录
https://blog.csdn.net/xiaoyi23000/article/details/80597516 1.执行命令ssh-keygen -t rsa,生成公钥和私钥 2.会在当前用户的 ...
- Python实现字典树
字典树,又称单词查找树,Trie 树,是一种树形结构,是一种哈希树的变种.典型应用是用于统计,排序和保存大量的字符串(但不仅限于字符串),所以经常被搜索引擎系统用于文本词频统计.它的优点是:利用字符串 ...
- 2019 C语言测试
求一元二次方程ax² + bx + c = 0的解 a,b,c为任意整数.(10分) 编写一个口令输入程序,让用户不停输入口令,直到输对为止,假设口令为456.(8分) 输出1000-9999之间能 ...
- 文件和异常练习——python编程从入门到实践
10-1 Python学习笔记:在文本编辑器中新建一个文件,写几句话来总结一下你至此学习到的python知识,其中每一行都以“In Python you can”打头.将这和文件命名为learning ...
- Python之路【第十六篇】:Python并发编程|进程、线程
一.进程和线程 进程 假如有两个程序A和B,程序A在执行到一半的过程中,需要读取大量的数据输入(I/O操作), 而此时CPU只能静静地等待任务A读取完数据才能继续执行,这样就白白浪费了CPU资源. 是 ...
- idea远程部署SpringBoot项目到Docker
安装docker服务或者系统学习docker参考这篇文档:https://shimo.im/docs/fE0eJCx8IIojQXzB/ 1.配置docker的远程端口 vim /usr/lib/sy ...
- [BZOJ3230]相似子串(后缀数组)
显然可以通过后缀数组快速找到询问的两个串分别是什么,然后正反各建一个后缀数组来求两个串的LCP和LCS即可. #include<cstdio> #include<cstring> ...
- 在win10上安装FFmpeg
1.下载:https://ffmpeg.zeranoe.com/builds/ 2.解压缩到,并改名为ffmpeg,放到如:D:\ffmpeg文件夹. 3.添加系统环境变量. 4.打开cmd,输入:f ...
- windows上git clone命令速度过慢问题的解决
在windows上用git clone 命令克隆一个仓库,速度非常的慢,但是浏览器访问github的速度确挺正常的,我也用了翻墙软件(SSR). git设置一下全局代理可以解决这个问题: git co ...
- 洛谷【P1048 采药】题解
题目链接 分析:典型的01背包问题,设dp[i][j]为空间(也就是题面中的时间)是j的背包在装前i个物品(草药)所得的最大价值,v[i]为第i个物品的重量(采药的时间),w[i]为第i个物品(草药) ...