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 相关文章推荐
利用jquery.qrcode在页面上生成二维码且支持中文
Feb 12 Javascript
使用JS获取当前地理位置方法汇总
Dec 18 Javascript
jQuery实现textarea自动增长宽高的方法
Dec 18 Javascript
判断数组的最佳方法(推荐)
Oct 11 Javascript
移动端点击态处理的三种实现方式
Jan 12 Javascript
利用vueJs实现图片轮播实例代码
Jun 03 Javascript
Angular搜索 过滤 批量删除 添加 表单验证功能集锦(实例代码)
Oct 25 Javascript
JavaScript实现全选取消效果
Dec 14 Javascript
vue源码学习之Object.defineProperty 对数组监听
May 30 Javascript
详解Vue中watch对象内属性的方法
Feb 01 Javascript
vue-router结合vuex实现用户权限控制功能
Nov 14 Javascript
vue使用video插件vue-video-player详解
Oct 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生成html文件方法总结
2014/12/01 PHP
PHP跨平台获取服务器IP地址自定义函数分享
2014/12/29 PHP
PHP实现通过Luhn算法校验信用卡卡号是否有效
2015/03/23 PHP
ubutu 16.04环境下,PHP与mysql数据库,网页登录验证实例讲解
2017/07/20 PHP
laravel 使用事件系统统计浏览量的实现
2019/10/16 PHP
[Web]防止用户复制页面内容和另存页面的方法
2009/02/06 Javascript
Javascript解决常见浏览器兼容问题的12种方法
2010/01/04 Javascript
ECMAScript 创建自己的js类库
2012/11/22 Javascript
判断一个变量是数组Array类型的方法
2013/09/16 Javascript
用javascript为页面添加天气显示实现思路及代码
2013/12/02 Javascript
鼠标滑过出现预览的大图提示效果
2014/02/26 Javascript
moment.js轻松实现获取当前日期是当年的第几周
2015/02/05 Javascript
JavaScript中有关一个数组中最大值和最小值及它们的下表的输出的解决办法
2016/07/01 Javascript
JavaScript中的Reflect对象详解(ES6新特性)
2016/07/22 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
2017/04/14 Javascript
bootstrap3 dialog 更强大、更灵活的模态框
2017/04/20 Javascript
Bootstrap 表单验证formValidation 实现表单动态验证功能
2017/05/17 Javascript
解决vue项目中type=”file“ change事件只执行一次的问题
2018/05/16 Javascript
Element UI 自定义正则表达式验证方法
2018/09/04 Javascript
vue ssr 实现方式(学习笔记)
2019/01/18 Javascript
小谈angular ng deploy的实现
2020/04/07 Javascript
vue中keep-alive、activated的探讨和使用详解
2020/07/26 Javascript
jQuery中event.target和this的区别详解
2020/08/13 jQuery
[49:08]完美世界DOTA2联赛PWL S2 LBZS vs FTD.C 第一场 11.27
2020/12/01 DOTA
Python抓取电影天堂电影信息的代码
2016/04/07 Python
一看就懂得Python的math模块
2018/10/21 Python
使用PYTHON解析Wireshark的PCAP文件方法
2019/07/23 Python
pandas dataframe 中的explode函数用法详解
2020/05/18 Python
乐天旅游台湾网站:Rakuten Travel TW
2017/06/01 全球购物
武汉世纪畅想数字传播有限公司.NET笔试题
2014/07/22 面试题
员工晚婚的请假条
2014/02/08 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
学校综治宣传月活动总结
2014/07/02 职场文书
学校领导班子对照检查材料
2014/08/28 职场文书
欢迎词范文
2015/01/27 职场文书
火烧圆明园观后感
2015/06/03 职场文书