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”跟 ...
随机推荐
- [转帖]Shell运维手册
shell实例手册 https://github.com/liquanzhou/ops_doc 0 说明{ 手册制作: 雪松 更新日期: 2018-09-11 欢 ...
- 复杂的sql参考(3)
SELECT apply.assets_code, apply.loan_apply_code, cust.cust_name, cust.id_no, cust.mobile, platform.p ...
- 全栈项目|小书架|微信小程序-登录回调及获取点赞列表功能
效果图 这一节介绍,登录回调 以及 喜欢列表 的实现. 登录回调:这里是指在获取登录完成之后,再进行下一步的操作. 比如效果图中我的页面,默认是未登录状态,积分和喜欢列表的数量都没有获取到. 而登录成 ...
- Openshift概念
Openshift是一个开源容器云平台,是一个基于主流的容器技术Docker和K8s构建的云平台.Openshift底层以Docker作为容器引擎驱动,以K8s作为容器编排引擎组件,并提供了开发语言, ...
- Spring-Cloud之Hystrix熔断器-5
一.在分布式系统中,服务与服务之间的依赖错综复杂,一种不可避免的情况就是某些服务会出现故障,导致依赖于它们的其他服务出现远程调度的线程阻塞 Hystrix是Netflix 公司开源的一个项目,它提供了 ...
- C#直接调用.mdf文件
一般情况下,.mdf文件都是作为MSSQL的数据库文件,只有在安装了Microsoft SQL Server才能实现调用. 事实上,除此之外,也可以直接调用.mdf文件,而无需安装Microsoft ...
- MVC通过ViewBag动态生成Html输出到View
今天再给自己总结一下,关于ViewBag赋值Html格式值,但是在web页显示不正常; 例如,ViewBag.Content = "<p>你好,我现在测试一个东西.</p& ...
- guava使用
对于Guava Cache本身就不多做介绍了,一个非常好用的本地cache lib,可以完全取代自己手动维护ConcurrentHashMap. 背景 目前需要开发一个接口I,对性能要求有非常高的要求 ...
- 解决SqlDataSource连接超时的问题
采用两种策略: 1.连接字符串增加Connect Timeout=1000(大约1000秒/60=16分钟) 2.设置SqlDataSourced 的 EnableCaching="True ...
- dede自定义内容模型下，列表只显示10条的问题及解决方法
<div class="zjtd-content-ld s-content"> {dede:arclist tagid='ld' row='100' pagesize= ...