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 相关文章推荐
document.getElementById的简写方式(获取id对象的简略写法)
Sep 10 Javascript
javascript showModalDialog 内跳转页面的问题
Nov 25 Javascript
10个很棒的jQuery代码片段
Sep 24 Javascript
基于OL2实现百度地图ABCD marker的效果
Oct 01 Javascript
JS+CSS实现的漂亮渐变背景特效代码(6个渐变效果)
Mar 25 Javascript
360提示[高危]使用存在漏洞的JQuery版本的解决方法
Oct 27 jQuery
vue-cli常用设置总结
Feb 24 Javascript
Angular父组件调用子组件的方法
Apr 02 Javascript
vue实现动态添加数据滚动条自动滚动到底部的示例代码
Jul 06 Javascript
详解如何创建并发布一个 vue 组件
Nov 08 Javascript
小程序接入腾讯位置服务的详细流程
Mar 03 Javascript
vue ant design 封装弹窗表单的使用
Jun 01 Vue.js
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
多重?l件?合查?(一)
2006/10/09 PHP
台湾中原大学php教程孙仲岳主讲
2008/01/07 PHP
php加密解密实用类分享
2014/01/07 PHP
PHP加Nginx实现动态裁剪图片方案
2014/03/10 PHP
PHP实现的QQ空间g_tk加密算法
2015/07/09 PHP
php制作的简单验证码识别代码
2016/01/26 PHP
基于PHP实现的多元线性回归模拟曲线算法
2018/01/30 PHP
Dojo 学习笔记入门篇 First Dojo Example
2009/11/15 Javascript
使用jquery实现图文切换效果另加特效
2013/01/20 Javascript
HTML5+jQuery插件Quicksand实现超酷的星际争霸2兵种分类展示效果(附demo源码下载)
2016/05/25 Javascript
详解JavaScript调用栈、尾递归和手动优化
2017/06/03 Javascript
Node.js学习教程之HTTP/2服务器推送【译】
2017/10/31 Javascript
jquery ui 实现 tab标签功能示例【测试可用】
2019/07/25 jQuery
jquery选择器和属性对象的操作实例分析
2020/01/10 jQuery
Vue Element校验validate的实例
2020/09/21 Javascript
TypeScript魔法堂之枚举的超实用手册
2020/10/29 Javascript
[02:57]2014DOTA2国际邀请赛 选手辛苦解说更辛苦
2014/07/10 DOTA
Python显示进度条的方法
2014/09/20 Python
dataframe设置两个条件取值的实例
2018/04/12 Python
对numpy中布尔型数组的处理方法详解
2018/04/17 Python
python cv2.resize函数high和width注意事项说明
2020/07/05 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
详解HTML5将footer置于页面最底部的方法(CSS+JS)
2018/10/11 HTML / CSS
HTML5 图片悬停放大的实现代码示例
2019/12/04 HTML / CSS
精灵市场:Pixie Market
2019/06/18 全球购物
Craghoppers德国官网:户外和旅行服装
2020/02/14 全球购物
Whistles官网:英国女装品牌
2020/08/14 全球购物
理工大学毕业生自荐信
2013/11/01 职场文书
工商学院毕业生自荐信
2013/11/12 职场文书
优秀村官事迹材料
2014/01/10 职场文书
预备党员思想汇报范文
2014/01/11 职场文书
教师学习培训邀请函
2014/02/04 职场文书
会计求职自荐信范文
2015/03/04 职场文书
毕业生学校组织意见
2015/06/04 职场文书
React + Threejs + Swiper 实现全景图效果的完整代码
2021/06/28 Javascript
详细介绍Next.js脚手架完整搭建封装
2022/04/26 Javascript