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 相关文章推荐
用javascript自动显示最后更新时间
Mar 15 Javascript
editable.js 基于jquery的表格的编辑插件
Oct 24 Javascript
JQuery获取或设置ckeditor的数据(示例代码)
Nov 15 Javascript
使用window.prompt()实现弹出用户输入的对话框
Apr 13 Javascript
jQuery.prop() 使用详解
Jul 19 Javascript
jQuery实现鼠标悬停背景翻转的黑色导航菜单代码
Sep 14 Javascript
jquery实现具有嵌套功能的选项卡
Feb 12 Javascript
Jquery Easyui自定义下拉框组件使用详解(21)
Dec 31 Javascript
jquery实现input框获取焦点的方法
Feb 06 Javascript
angularjs http与后台交互的实现示例
Dec 21 Javascript
JS 创建对象的模式实例小结
Apr 28 Javascript
js基于div丝滑实现贝塞尔曲线
Sep 23 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
PHP编程过程中需要了解的this,self,parent的区别
2009/12/30 PHP
PHP实现对二维数组某个键排序的方法
2016/09/14 PHP
tp5框架前台无限极导航菜单类实现方法分析
2020/03/29 PHP
实例:用 JavaScript 来操作字符串(一些字符串函数)
2007/02/15 Javascript
innerHTML 和 getElementsByName 在IE下面的bug 的解决
2010/04/09 Javascript
基于jquery的cookie的用法
2011/01/10 Javascript
javascript验证只能输入数字和一个小数点示例
2013/10/21 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
JavaScript拆分字符串时产生空字符的解决方案
2014/09/26 Javascript
JavaScript AOP编程实例
2015/06/16 Javascript
js实现打地鼠小游戏
2017/02/13 Javascript
JS简单实现点击按钮或文字显示遮罩层的方法
2017/04/27 Javascript
详解angularjs实现echart图表效果最简洁教程
2017/11/29 Javascript
JavaScript回调函数callback用法解析
2020/01/14 Javascript
[46:47]2014 DOTA2国际邀请赛中国区预选赛 DT VS HGT
2014/05/22 DOTA
Python递归函数定义与用法示例
2017/06/02 Python
详解使用 pyenv 管理多个版本 python 环境
2017/10/19 Python
TensorFlow高效读取数据的方法示例
2018/02/06 Python
基于Python pip用国内镜像下载的方法
2018/06/12 Python
替换python字典中的key值方法
2018/07/06 Python
pytorch实现onehot编码转为普通label标签
2020/01/02 Python
python logging 日志的级别调整方式
2020/02/21 Python
django日志默认打印request请求信息的方法示例
2020/05/17 Python
pycharm开发一个简单界面和通用mvc模板(操作方法图解)
2020/05/27 Python
英国的领先快速时尚零售商:In The Style
2019/03/25 全球购物
外贸主管求职简历的自我评价
2013/10/23 职场文书
工商管理实习生自我鉴定范文
2013/12/18 职场文书
一句话工作感言
2014/03/01 职场文书
民警个人对照检查剖析材料
2014/09/17 职场文书
2014年组织委员工作总结
2014/12/01 职场文书
销售内勤岗位职责范本
2015/04/13 职场文书
水浒传读书笔记
2015/06/25 职场文书
2015年安全生产月工作总结
2015/07/27 职场文书
开业庆典致辞
2015/08/01 职场文书
如何优化vue打包文件过大
2022/04/13 Vue.js
SQL Server使用CROSS APPLY与OUTER APPLY实现连接查询
2022/05/25 SQL Server