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 装载和执行
Nov 17 Javascript
Javascript中this关键字的一些小知识
Mar 15 Javascript
跟我学习javascript的arguments对象
Nov 16 Javascript
jQuery实现select下拉框获取当前选中文本、值、索引
May 08 jQuery
Javascript调试之console对象——你不知道的一些小技巧
Jul 10 Javascript
纯js实现页面返回顶部的动画(超简单)
Aug 10 Javascript
jquery插件开发之选项卡制作详解
Aug 30 jQuery
Angular2的管道Pipe的使用方法
Nov 07 Javascript
详解Vue-axios 设置请求头问题
Dec 06 Javascript
jquery中为什么能用$操作
Jun 18 jQuery
通过实例解析chrome如何在mac环境中安装vue-devtools插件
Jul 10 Javascript
JavaScript严格模式不支持八进制的问题讲解
Nov 07 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传值方式和ajax的验证功能
2017/03/27 PHP
PHP实现将几张照片拼接到一起的合成图片功能【便于整体打印输出】
2017/11/14 PHP
[原创]js与自动伸缩图片 自动缩小图片的多浏览器兼容的方法总结
2007/03/12 Javascript
js实现上传图片之上传前预览图片
2013/03/25 Javascript
让图片跳跃起来  javascript图片轮播特效
2016/02/16 Javascript
JavaScript 轮播图和自定义滚动条配合鼠标滚轮分享代码贴
2016/10/28 Javascript
javascript输出AscII码扩展集中的字符方法
2016/12/26 Javascript
jQuery树控件zTree使用方法详解(一)
2017/02/28 Javascript
Nodejs读取文件时相对路径的正确写法(使用fs模块)
2017/04/27 NodeJs
JavaScript切换搜索引擎的导航网页搜索框实例代码
2017/06/11 Javascript
angular4中*ngFor不能对返回来的对象进行循环的解决方法
2018/09/12 Javascript
webpack4 从零学习常用配置(小结)
2019/05/28 Javascript
JS通过ajax + 多列布局 + 自动加载实现瀑布流效果
2019/05/30 Javascript
javascript将扁平的数据转为树形结构的高效率算法
2020/02/27 Javascript
详解Vue 数据更新了但页面没有更新的 7 种情况汇总及延伸总结
2020/05/28 Javascript
[03:08]TI9战队档案 - Vici Gaming
2019/08/20 DOTA
[01:23:45]DOTA2-DPC中国联赛 正赛 CDEC vs Dragon BO3 第一场 1月22日
2021/03/11 DOTA
Python搜索引擎实现原理和方法
2017/11/27 Python
安装完Python包然后找不到模块的解决步骤
2020/02/13 Python
python微信公众号开发简单流程实现
2020/03/09 Python
浅谈Python 参数与变量
2020/06/20 Python
css3中background新增的4个新的相关属性用法介绍
2013/09/26 HTML / CSS
泰国综合购物网站:Lazada泰国
2018/04/09 全球购物
澳大利亚第一旅行车和房车配件店:Caravan RV Camping
2020/12/26 全球购物
师范生实习个人的自我评价
2013/09/28 职场文书
管理失职检讨书
2014/02/12 职场文书
学生干部学习的自我评价
2014/02/18 职场文书
中学教师教育感言
2014/02/21 职场文书
财务人员担保书
2014/05/13 职场文书
旅游节目策划方案
2014/05/26 职场文书
假面舞会策划方案
2014/05/29 职场文书
小学阳光体育活动总结
2014/07/05 职场文书
中学生爱国演讲稿
2014/09/05 职场文书
单位推荐信范文
2015/03/27 职场文书
Spring实现内置监听器
2021/07/09 Java/Android
Python turtle编写简单的球类小游戏
2022/03/31 Python