vue事件
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
.div1{
width: 300px;
height: 300px;
margin: 0 auto;
background: skyblue;
}
</style>
<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
</head>
<body>
<div id="app">
<div class="div1" :style="{ background:color }" @click = 'changeColor($event,1)'> </div> <ul>
<li v-for='(item,index) in list' @click='getIndex($event,index)' :data-index='index' >{{item}}</li>
</ul>
</div>
<script type="text/javascript">
var app = new Vue({
el:'#app',
data:{
color:'skyblue',
list:[1,2,3,4]
},
methods:{
changeColor:function(e,index){
console.log(e)
console.log(index)
this.color = 'pink'
},
getIndex(e,index){
console.log(e)
console.log(index)
console.log(e.target.dataset.index)//这种事件传值的方式，可以适用任何地方
}
}
})
</script>
</body>
</html>
vue事件的更多相关文章
- Vue—事件修饰符
Vue事件修饰符 Vue.js 为 v-on 提供了事件修饰符来处理 DOM 事件细节,如:event.preventDefault() 或 event.stopPropagation(). Vue. ...
- vue 事件上加阻止冒泡 阻止默认事件
重点 vue事件修饰符 <!-- 阻止单击事件冒泡 --> <a v-on:click.stop="doThis"></a> <!-- 提 ...
- vue事件监听机制
vue事件是同步的.如果绑定了事件(组件标签上绑定事件) 组件的事件触发 组件调用时绑定事件 之后监听事件: $emit 抛出后活等着 $on ,如果监听到了则阻塞执行: 如果为监听到或者未绑定,则会 ...
- Vue 事件的基本使用与语法差异
"v-on:"可以简写为"@" "click"单击 "dblclick"双加 代码: <!doctype html ...
- Vue 事件监听实现导航栏吸顶效果（页面滚动后定位）
Vue 事件监听实现导航栏吸顶效果(页面滚动后定位) Howie126313 关注 2017.11.19 15:05* 字数 100 阅读 3154评论 0喜欢 0 所说的吸顶效果就是在页面没有滑动之 ...
- vue事件修饰符(once:prev:stop)
vue事件修饰符(once:prev:stop) stop修饰符 效果如下: 当你鼠标在这个div里的时候,x与y的值:会随着鼠标的变化而变化.但是当鼠标放在stopMoving的时候,x与y的值是 ...
- Vue事件绑定原理
Vue事件绑定原理 Vue中通过v-on或其语法糖@指令来给元素绑定事件并且提供了事件修饰符,基本流程是进行模板编译生成AST,生成render函数后并执行得到VNode,VNode生成真实DOM节点 ...
- Vue 事件的高级使用方法
Vue 事件的高级使用方法 事件方法 在Vue中提供了4中事件监听方法,分别是: $on(event: string | Array, fn) $emit(event: string) $once(e ...
- Vue - 事件绑定
1.内联方式: A:将事件处理器绑定到一个方法中,以下所有事件都以click事件作为案例 注意:内联方式下事件处理器只能绑定一个方法,要是想要绑定多个方法,依旧还是使用js中的addEventList ...
- Vue 事件
一.事件冒泡 方法一.使用event.cancelBubble = true来阻止冒泡 <div @click="show2()"> <input type=&q ...
随机推荐
- Spring Boot 整合 Web 开发
这一节我们主要学习如何整合 Web 相关技术: Servlet Filter Listener 访问静态资源 文件上传 文件下载 Web三大基本组件分别是:Servlet,Listener,Filte ...
- Git很麻烦？不存在的！掌握这几招就够了
废话不多说,下面直接开始了! 查看原文 确保代码库是最新的,先用这条命令把你的代码拉取到本地 git clone -- 修改完代码后,按顺序执行下面四个命令 git pull git add * /r ...
- 虚拟现实研究经典问卷Presence Questionnaire (PQ) 详细介绍
虚拟现实(VR)是一种沉浸式体验,它的作用就是将用户完全包裹在一个人为构建出的(数字)虚拟世界中,让用户在这个新环境中得到不一样的体验,或完成一些现实中不能完成的任务.所以让体验者相信“我身处此中”非 ...
- 自适应布局display:-webkit-box的用法
在web布局中,我们经常使用的是display:inline-block,display:flex,这些,但其实在进行移动端设备自适应布局中,-webkit-box布局更加合适 不同的浏览器有不同的前 ...
- java架构之路-（面试篇）Mysql面试大全
说一下mysql比较宏观的面试,具体咋写sql的这里就不过多举例了.后面我还会给出一个关于mysql面试优化的试题,这里主要说的索引和B+Tree结构,很少提到我们的集群配置优化方案. 1.索引是什么 ...
- 地图的标注Marker
(1)在point处添加标注:var marker = new BMap.Marker(point); (2)添加覆盖物:map.addOverlay(marker); (3)激活标注的拖拽功能:ma ...
- js实现烟花效果
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- mydumper 介绍及使用
1 Mydumper 介绍 Mydumper是一个针对MySQL和Drizzle的高性能多线程备份和恢复工具. Mydumper主要特性: 轻量级C语言写的 多线程备份,备份后会生成多个备份文件 事务 ...
- 浅谈json web token及应用
Json Web Token (JWT),是一个非常轻巧的规范,这个规范允许在网络应用环境间客户端和服务器间较安全的传递信息.该token被设计为紧凑且安全的,特别适用于分布式站点的单点登录(SSO) ...
- Python+Django+ansible playbook自动化运维项目实战☝☝☝
Python+Django+ansible playbook自动化运维项目实战☝☝☝ 一.入门引导 DevOPSDevOps(英文Development和Operations的组合)是一组过程.方法 ...