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 ...
随机推荐
- React + TypeScript 实现泛型组件
泛型类型 TypeScript 中,类型(interface, type)是可以声明成泛型的,这很常见. interface Props<T> { content: T; } 这表明 Pr ...
- Spring boot 官网学习笔记 - Spring Boot CLI 入门案例
安装CLI https://repo.spring.io/release/org/springframework/boot/spring-boot-cli/2.1.1.RELEASE/spring-b ...
- docker 运行容器时指定--sysctl参数来设置系统参数
指定--sysctl参数来设置系统参数,通过这些参数来调整系统性能,Docker通过一个 ValidateSysctl函数来限制 sysctl参数可以传入的项,源码如下: // docker/opts ...
- Zookeeper监控（Zabbix）
一直在弄监控,这些个中间件Zookeeper.Kafka......,平时也只知道一点皮毛,也就搭建部署过,没有真正的用过,一般都是大数据的同学在用,作为运维人员我需要对他做一个监控,由于对他不是 ...
- C++set 和 multiset的使用
最后一个自由支配的暑假,学一些自己感兴趣的部分,也算为大三作准备. C++中set集合的使用 定义一个int类型的集合 set<int> s: set<int>::iterat ...
- .NET成人礼 | 还记得20年前一起拖过的控件吗？
本文是MVP Ediwang写的回忆一个80后的拖控件的感悟,与君共勉: 每一代人都有记忆里的味道.煤球炉.黑白电视机是属于父母的记忆.而“拖控件”式编程,启蒙了无数像我这样的80后(嗯,89也算80 ...
- CRS-2674: Start of 'ora.cssd' on 'rac2' failed 引发的rac集群服务起不来问题
问题背景:客户反馈Oracle rac集群节点宕机 1.首先查看宕机原因,归档日志满导致服务重启,查看归档日志路径是USE_DB_RECOVERY_FILE_DEST (默认路径), 安装的时候没有做 ...
- QCustomPlot 基础
QCutomPlot简介 官网网址及介绍 https://www.qcustomplot.com/ QCustomPlot is a Qt C++ widget for plotting and da ...
- Jenkins设置BUILD NUMBER初始值
由于服务器迁移,需要将之前的Jenkins构建项目一并迁移,为了区分构建编号,需要将所有项目的BUILDE NUMBER 初始值定义. 网上有一些资料是更新单个项目的,我们这项目几百个,所以只好自己研 ...
- Java中ArrayList和LinkedList的性能分析
ArrayList和LinkedList是Java集合框架中经常使用的类.如果你只知道从基本性能比较ArrayList和LinkedList,那么请仔细阅读这篇文章. ArrayList应该在需要更多 ...