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的匿名函数小结
Dec 31 Javascript
避免回车键导致的页面无意义刷新的解决方法
Apr 12 Javascript
JS验证邮箱格式是否正确的代码
Dec 05 Javascript
JavaScript中的函数的两种定义方式和函数变量赋值
May 12 Javascript
js+csss实现的一个带复选框的下拉框
Sep 29 Javascript
jQuery实现气球弹出框式的侧边导航菜单效果
Sep 22 Javascript
jQuery1.9.1源码分析系列(十六)ajax之ajax框架
Dec 04 Javascript
jquery.serialize() 函数语法及简单实例
Jul 08 Javascript
微信小程序的mpvue框架快速上手指南
May 15 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
小程序识别身份证,银行卡,营业执照,驾照的实现
Nov 05 Javascript
微信小程序canvas开发水果老虎机的思路详解
Feb 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
BBS(php &amp; mysql)完整版(三)
2006/10/09 PHP
Bo-Blog专用的给Windows服务器的IIS Rewrite程序
2007/08/26 PHP
ThinkPHP实现将本地文件打包成zip下载
2014/06/26 PHP
Fedora下安装php Redis扩展笔记
2014/09/03 PHP
ThinkPHP控制器里javascript代码不能执行的解决方法
2014/11/22 PHP
ECSHOP完美解决Deprecated: preg_replace()报错的问题
2016/05/17 PHP
ThinkPHP 模板引擎使用详解
2017/05/07 PHP
js 表单验证方法(实用)
2009/04/28 Javascript
判断用户是否在线的代码
2011/03/05 Javascript
基于jquery的loading 加载提示效果实现代码
2011/09/01 Javascript
js加强的经典分页实例
2013/03/15 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
2014/05/05 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
怎么引入(调用)一个JS文件
2016/05/26 Javascript
JavaScript编程设计模式之构造器模式实例分析
2017/10/25 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
[01:27]2014DOTA2展望TI 剑指西雅图IG战队专访
2014/06/30 DOTA
[01:29]Ti4循环赛第三日精彩回顾
2014/07/13 DOTA
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
[01:15]《辉夜杯》北京网鱼队巡礼
2015/10/26 DOTA
使用Python脚本和ADB命令实现卸载App
2017/02/10 Python
Python通过Django实现用户注册和邮箱验证功能代码
2017/12/11 Python
python实现俄罗斯方块
2018/06/26 Python
python读取大文件越来越慢的原因与解决
2019/08/08 Python
python创建n行m列数组示例
2019/12/02 Python
检测tensorflow是否使用gpu进行计算的方式
2020/02/03 Python
iHerb香港:维生素、补充剂和天然保健品
2017/08/01 全球购物
Lungolivigno Fashion官网:高级时装在线购物
2020/10/17 全球购物
网络工程系信息安全技术专业大学生求职信
2013/10/22 职场文书
研究生个人学年总结
2015/02/14 职场文书
八一建军节慰问信
2015/02/14 职场文书
岗位聘任报告
2015/03/02 职场文书
2015年班长个人工作总结
2015/04/03 职场文书
党员承诺书范文2015
2015/04/27 职场文书
2015年城市管理工作总结
2015/05/23 职场文书
SpringBoot快速入门详解
2021/07/21 Java/Android