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”跟 ...
随机推荐
- LeetCode 1021. 删除最外层的括号(Remove Outermost Parentheses)
1021. 删除最外层的括号 1021. Remove Outermost Parentheses 题目描述 有效括号字符串为空 ("")."(" + A + ...
- 028 SSM综合练习04--数据后台管理系统--订单相关操作
1.订单表及其关联表的关系分析 2.数据库表对应实体类 (1)Orders.java package lucky.domain; import lucky.utils.DateUtils; impor ...
- fineui 实现下拉框模糊查询
官网下拉框模糊查询只能实现首字母模糊匹配,如果实现类似这样的 like '%'+关键字+'%',却没有. 今天群里的没想好同学分享了,前后模糊匹配代码. 代码示例: <body> ...
- DRF框架(八)——drf-jwt手动签发与校验、搜索过滤组件、排序过滤组件、基础分页组件
自定义drf-jwt手动签发和校验 签发token源码入口 前提:给一个局部禁用了所有 认证与权限 的视图类发送用户信息得到token,其实就是登录接口,不然进不了登录页面 获取提交的username ...
- SQL SERVER 数据库查询表信息
SELECT 表名 then d.name else '' end, 表说明 then isnull(f.value,'') else '' end, 字段序号 = a.colorder, 字段名 = ...
- 【题解】Luogu P5400 [CTS2019]随机立方体
原题传送门 毒瘤计数题 我们设\(dp_i\)表示至少有\(i\)个极大数字的概率,\(ans_i\)表示恰好有\(i\)个极大数的概率,\(mi=Min(n,m,l)\) 易知: \[dp_i=\s ...
- 华为云·寻找黑马程序员#【代码重构之路】如何“消除”if/else【华为云技术分享】
1. 背景 if/else是高级编程语言中最基础的功能,虽然 if/else 是必须的,但滥用 if/else,特别是各种大量的if/else嵌套,会对代码的可读性.可维护性造成很大伤害,对于阅读代码 ...
- yii框架定时任务的操作
在项目根目录里找到console(操作台,控制台)文件夹,在console文件夹里建一个TestController文件,如图所示: 文件内部写如下内容: 切记该文件继承的Controller一定是 ...
- linux 流量监控利器：iftop
在类Unix系统中可以使用top查看系统资源.进程.内存占用等信息. 查看网络状态可以使用netstat.nmap等工具. 若要查看实时的网络流量,监控TCP/IP连接等,则可以使用iftop. if ...
- Python进阶----进程之间通信(互斥锁,队列(参数:timeout和block),), ***生产消费者模型
Python进阶----进程之间通信(互斥锁,队列(参数:timeout和block),), ***生产消费者模型 一丶互斥锁 含义: 每个对象都对应于一个可称为" 互斥锁&qu ...