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用图作提交按钮或超连接
Mar 26 Javascript
JavaScript DOM学习第六章 表单实例
Feb 19 Javascript
JavaScript常用字符串与数组扩展函数小结
Apr 24 Javascript
Bootstrap按钮功能之查询按钮和重置按钮
Oct 26 Javascript
适用于手机端的jQuery图片滑块动画
Dec 09 Javascript
Angular directive递归实现目录树结构代码实例
May 05 Javascript
JS获取短信验证码倒计时的实现代码
May 22 Javascript
ReactNative踩坑之配置调试端口的解决方法
Jul 28 Javascript
vue-cli 使用axios的操作方法及整合axios的多种方法
Sep 12 Javascript
玩转Koa之核心原理分析
Dec 29 Javascript
在微信小程序中使用mqtt服务的方法
Dec 13 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
Dec 26 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
DOTA2【瓜皮时刻】Vol.91 RTZ山史最惨“矿难”
2021/03/05 DOTA
一个php作的文本留言本的例子(三)
2006/10/09 PHP
PHP的FTP学习(四)
2006/10/09 PHP
[转帖]PHP世纪万年历
2006/12/06 PHP
php设计模式之观察者模式的应用详解
2013/05/21 PHP
destoon首页调用求购供应信息的地区名称的方法
2014/08/21 PHP
php生成zip文件类实例
2015/04/07 PHP
PHP基于MySQL数据库实现对象持久层的方法
2015/06/17 PHP
以实例全面讲解PHP中多进程编程的相关函数的使用
2015/08/18 PHP
Z-Blog中用到的js代码
2007/03/15 Javascript
jquerymobile checkbox及时刷新才能获取其准确值
2012/04/14 Javascript
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
js获取滚动距离的方法
2015/05/30 Javascript
jQuery代码实现图片墙自动+手动淡入淡出切换效果
2016/05/09 Javascript
Jquery实现遮罩层的简单实例(就是弹出DIV周围都灰色不能操作)
2016/07/14 Javascript
JS正则子匹配实例分析
2016/12/22 Javascript
gulp加批处理(.bat)实现ng多应用一键自动化构建
2017/02/16 Javascript
ECMAScript6变量的解构赋值实例详解
2017/09/19 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
浅谈webpack devtool里的7种SourceMap模式
2019/01/14 Javascript
在HTML中使用JavaScript的两种方法
2020/12/24 Javascript
vue 使用rules对表单字段进行校验的步骤
2020/12/25 Vue.js
Python中尝试多线程编程的一个简明例子
2015/04/07 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
python pyenv多版本管理工具的使用
2019/12/23 Python
Python count函数使用方法实例解析
2020/03/23 Python
python属于解释语言吗
2020/06/11 Python
Python使用grequests并发发送请求的示例
2020/11/05 Python
详解如何使用CSS3中的结构伪类选择器和伪元素选择器
2020/01/06 HTML / CSS
localStorage的过期时间设置的方法详解
2018/11/26 HTML / CSS
拥有超过850家商店的美国在线派对商店:Party City
2018/10/21 全球购物
Ray-Ban雷朋瑞典官方网站:全球领先的太阳眼镜品牌
2019/08/22 全球购物
文明礼仪伴我行演讲稿
2014/05/12 职场文书
违章停车检讨书
2014/10/21 职场文书
全家福照片寄语怎么写?
2019/04/02 职场文书
Kubernetes中Deployment的升级与回滚
2022/04/01 Servers