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在IE下trim函数无法使用的解决方法
Sep 12 Javascript
举例讲解Node.js中的Writable对象
Jul 29 Javascript
详解Bootstrap glyphicons字体图标
Jan 04 Javascript
JS获取当前脚本文件的绝对路径
Mar 02 Javascript
JavaScript中style.left与offsetLeft的使用及区别详解
Jun 08 Javascript
Bootstrap幻灯片轮播图支持触屏左右手势滑动的实现方法
Oct 13 Javascript
JavaScript实现简单的星星评分效果
May 18 Javascript
浅谈react前后端同构渲染
Sep 20 Javascript
JavaScript通过mouseover()实现图片变大效果的示例
Dec 20 Javascript
基于Vue 撸一个指令实现拖拽功能
Oct 09 Javascript
基于javascript处理二进制图片流过程详解
Jun 08 Javascript
vue接通后端api以及部署到服务器操作
Aug 13 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
discuz目录文件资料汇总
2014/12/30 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
自适应图片大小的弹出窗口
2006/07/27 Javascript
一款Jquery 分页插件的改造方法(服务器端分页)
2011/07/11 Javascript
javascript实现根据身份证号读取相关信息
2014/12/17 Javascript
jQuery实现拖拽效果插件的方法
2015/03/23 Javascript
js 能实现监听F5页面刷新子iframe 而父页面不刷新的方法
2016/11/09 Javascript
js从输入框读取内容,比较两个数字的大小方法
2017/03/13 Javascript
Nodejs+express+ejs简单使用实例代码
2017/09/18 NodeJs
微信小程序 MinUI组件库系列之badge徽章组件示例
2018/08/20 Javascript
Layui实现数据表格默认全部显示(不要分页)
2019/10/26 Javascript
解决Nuxt使用axios跨域问题
2020/07/06 Javascript
使用python开发vim插件及心得分享
2014/11/04 Python
Python的Flask框架中实现登录用户的个人资料和头像的教程
2015/04/20 Python
python根据时间获取周数代码实例
2019/09/30 Python
如何使用Python脚本实现文件拷贝
2019/11/20 Python
Python在centos7.6上安装python3.9的详细教程(默认python版本为2.7.5)
2020/10/15 Python
python 如何引入协程和原理分析
2020/11/30 Python
详解pycharm的python包opencv(cv2)无代码提示问题的解决
2021/01/29 Python
使用CSS3制作版头动画效果
2020/12/24 HTML / CSS
HTML5实现分享到微信好友朋友圈QQ好友QQ空间微博二维码功能
2018/01/03 HTML / CSS
小狗电器官方商城:中国高端吸尘器品牌
2017/03/29 全球购物
机械设计制造专业个人求职信
2013/09/25 职场文书
环境工程求职简历的自我评价范文
2013/10/24 职场文书
总务岗位职责
2013/11/19 职场文书
大学毕业生的自我鉴定
2013/11/30 职场文书
思想品德课教学反思
2014/02/10 职场文书
中学生操行评语大全
2014/04/24 职场文书
巾帼建功标兵事迹材料
2014/05/11 职场文书
党性观念心得体会
2014/09/03 职场文书
员工培训协议书
2014/09/15 职场文书
离婚协议书怎么写(范本参考)
2014/09/30 职场文书
赤壁观后感(2)
2015/06/15 职场文书
「天才王子的赤字国家重生术」妮妮姆·拉雷粘土人开订
2022/03/21 日漫
vue实力踩坑之push当前页无效
2022/04/10 Vue.js
使用HBuilder制作一个简单的HTML5网页
2022/07/07 HTML / CSS