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”跟 ...
随机推荐
- react中的ref在input中的详解
当我们在项目中遇见文本输入框的时候,获取时刻输入框中的值 1.受控组件 class NameForm extends React.Component { constructor(props) { su ...
- DBCP(MySql)+Servlet+BootStrap+Ajax实现用户登录与简单用户管理系统
目 录 简介 本次项目通过Maven编写 本文最后会附上代码 界面截图 登录界面 注册界面 登录成功进入主页 增加用户操作 删除用户操作 修改用户操作 主要代码 Dao层代码 DBCP代码 Se ...
- 彻底理解Runnable和Thread的区别
昨天去面试,面试官问了一个问题:Runnable和Thread有什么区别,因为针对这个问题以前有背过,并且网上大多数都是这些结论,所以脱口而出: 1.Thread有单继承的问题: 2.Runnable ...
- 56 容器（十）——Iterator迭代器遍历容器
迭代器的获取 LIst与Set容器统一使用他们的对象.Iterator()方法获得迭代器对象,然后使用while循环配合迭代器的方法hasNext()及next()来遍历容器. List<Str ...
- Jenkins服务使用 宿主机的docker、docker-compose (Jenkins 执行sudo命令时出现“sudo: no tty present and no askpass program specified”，以及 docker-compose command not found解决办法)
若要转载本文,请务必声明出处:https://www.cnblogs.com/zhongyuanzhao000/p/11681474.html 原因: 本人最近正在尝试CI/CD,所以就使用了 Jen ...
- 入门篇-contrail-command(对接openstack)All-In-One
基础环境 系统: centos7.6(3.10.0-957) 64G内存 500G磁盘 关闭防火墙 systemctl disable firewalld 关闭selinux sed -i 's/SE ...
- C# vb .net实现透视图效果滤镜
在.net中,如何简单快捷地实现Photoshop滤镜组中的透视图效果呢?答案是调用SharpImage!专业图像特效滤镜和合成类库.下面开始演示关键代码,您也可以在文末下载全部源码: 设置授权 第一 ...
- SpringBoot中Logback日志的配置
说明 在SpringBoot中自带的日志工具是Logback,我们可以在Springboot的配置文件中直接对Logback进行一些简单的配置,如: logging.level.com.nowcode ...
- P2613 【模板】有理数取余 (数论)
题目 P2613 [模板]有理数取余 解析 简单的数论题 发现并没有对小数取余这一说,所以我们把原式化一下, \[(c=\frac{a}{b})\equiv a\times b^{-1}(mod\ p ...
- npm和Node.js简介
Node.js Node.js是JavaScript的一种运行环境,是对Google V8引擎进行的封装.是一个服务器端的javascript的解释器.Node.js允许通过JavaScript和一系 ...