vue如何获取点击事件源的方法


Posted in Javascript onAugust 10, 2017

整理文档,搜刮出一个vue如何获取点击事件源的方法,稍微整理精简一下做下分享。

<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <title>vue click事件获取当前元素对象</title>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
    <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
  </head>
  <body id="app">
    <ul>
      <li v-on:click="say('hello!', $event)" style="background-color:blue;color:white;">点击当前行获取下一行</li>
      <li>li2</li>
      <li>li3</li>
    </ul>
    <script>
      new Vue({
        el: '#app',
        data: {
          message: 'Hello Vue.js!'
        },
        methods: {
          say: function(msg, event) { 
            //获取点击对象   
            var el = event.currentTarget;
            var li2text = $(el).next().text();
            alert("当前对象的内容:"+$(el).text()+" 下一行内容:"+li2text);
          }
        }
      })
    </script>
  </body>
</html>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
彻底搞懂JS无缝滚动代码
Jan 03 Javascript
Javascript的并行运算实现代码
Nov 19 Javascript
文字溢出实现溢出的部分再放入一个新生成的div中具体代码
May 17 Javascript
jquery 漂亮的删除确认和提交无刷新删除示例
Nov 13 Javascript
JSON与XML优缺点对比分析
Jul 17 Javascript
jQuery中选择器的基础使用教程
May 23 Javascript
html+js+highcharts绘制圆饼图表的简单实例
Aug 04 Javascript
EasyUI学习之DataGird分页显示数据
Dec 29 Javascript
AngularJS自定义指令详解(有分页插件代码)
Jun 12 Javascript
用原生JS实现简单的多选框功能
Jun 12 Javascript
JavaScript之Canvas_动力节点Java学院整理
Jul 04 Javascript
Element-ui之ElScrollBar组件滚动条的使用方法
Sep 14 Javascript
Vue单文件组件基础模板小结
Aug 10 #Javascript
基于JavaScript实现淘宝商品广告效果
Aug 10 #Javascript
Vue数组更新及过滤排序功能
Aug 10 #Javascript
Webpack性能优化 DLL 用法详解
Aug 10 #Javascript
详解React Native网络请求fetch简单封装
Aug 10 #Javascript
jQuery Ajax 实现分页 kkpager插件实例代码
Aug 10 #jQuery
JS对象与JSON互转换、New Function()、 forEach()、DOM事件流等js开发基础小结
Aug 10 #Javascript
You might like
如何判断图片地址是否失效
2007/02/02 Javascript
从阿里妈妈发现的几个不错的表单验证函数
2007/09/21 Javascript
js实现简单模态窗口,背景灰显
2008/11/14 Javascript
js控制CSS样式属性语法对照表
2012/12/11 Javascript
EasyUI中datagrid在ie下reload失败解决方案
2015/03/09 Javascript
JavaScript处理解析JSON数据过程详解
2015/09/11 Javascript
jQuery解决input元素的blur事件和其他非表单元素的click事件冲突问题
2016/08/15 Javascript
js显示动态时间的方法详解
2016/08/20 Javascript
详解从新建vue项目到引入组件Element的方法
2017/08/29 Javascript
详解为Bootstrap Modal添加拖拽的方法
2018/01/05 Javascript
使用Vue.js和Flask来构建一个单页的App的示例
2018/03/21 Javascript
vue在index.html中引入静态文件不生效问题及解决方法
2019/04/29 Javascript
详解利用eventemitter2实现Vue组件通信
2019/11/04 Javascript
javascript用defineProperty实现简单的双向绑定方法
2020/04/03 Javascript
Element中Slider滑块的具体使用
2020/07/29 Javascript
Python删除windows垃圾文件的方法
2015/07/14 Python
Python学习笔记之视频人脸检测识别实例教程
2019/03/06 Python
浅谈Python基础—判断和循环
2019/03/22 Python
Pycharm运行加载文本出现错误的解决方法
2019/06/27 Python
Python 用matplotlib画以时间日期为x轴的图像
2019/08/06 Python
PyTorch预训练的实现
2019/09/18 Python
用python制作个音乐下载器
2021/01/30 Python
非常漂亮的CSS3百叶窗焦点图动画
2016/02/24 HTML / CSS
canvas因为图片资源不在同一域名下而导致的跨域污染画布的解决办法
2019/01/18 HTML / CSS
诗狄娜化妆品官方网站:Stila Cosmetics
2016/12/21 全球购物
Manuka Doctor英国官网:真正的麦卢卡蜂蜜和护肤品
2018/10/26 全球购物
巴西网上药店:Drogaria Araujo
2021/01/06 全球购物
英国发展最快的在线超市之一:Click Marketplace
2021/02/15 全球购物
大四自我鉴定范文
2013/10/06 职场文书
货代行业个人求职简历的自我评价
2013/10/22 职场文书
党的群众路线教育实践活动制度建设计划
2014/11/03 职场文书
2014年银行个人工作总结
2014/12/05 职场文书
如何写一份成功的商业计划书
2019/06/25 职场文书
MySQL GRANT用户授权的实现
2021/06/18 MySQL
Java使用JMeter进行高并发测试
2021/11/23 Java/Android
Mysql 如何合理地统计一个数据库里的所有表的数据量
2022/04/18 MySQL