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 控制弹出窗口
Apr 10 Javascript
浅析document.createDocumentFragment()与js效率
Jul 08 Javascript
鼠标移动到图片名上,显示图片的简单实例
Jul 14 Javascript
javascript读取Xml文件做一个二级联动菜单示例
Mar 17 Javascript
跟我学习javascript的函数和函数表达式
Nov 16 Javascript
js实现内容显示并使用json传输数据
Mar 16 Javascript
vue2.0实战之基础入门(1)
Mar 27 Javascript
JavaScript实现打地鼠小游戏
Apr 23 Javascript
详解使用vue实现tab 切换操作
Jul 03 Javascript
react-native之ART绘图方法详解
Aug 08 Javascript
vue双向数据绑定知识点总结
Apr 18 Javascript
vue 使用html2canvas将DOM转化为图片的方法
Sep 11 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中一些可以替代正则表达式函数的字符串操作函数
2014/11/17 PHP
分析PHP中单双引号的误区和双引号小隐患
2016/07/19 PHP
php smtp实现发送邮件功能
2017/06/22 PHP
Laravel获取所有的数据库表及结构的方法
2019/10/10 PHP
javascript 必知必会之closure
2009/09/21 Javascript
javascript 模式设计之工厂模式学习心得
2010/04/27 Javascript
Js制作简单弹出层DIV在页面居中 中间显示遮罩的具体方法
2013/08/08 Javascript
IE下支持文本框和密码框placeholder效果的JQuery插件分享
2015/01/31 Javascript
JS封装的三级联动菜单(使用时只需要一行js代码)
2016/10/24 Javascript
NodeJS仿WebApi路由示例
2017/02/28 NodeJs
Angular整合zTree的示例代码
2018/01/24 Javascript
JavaScript常见继承模式实例小结
2019/01/11 Javascript
在vue项目中利用popstate处理页面返回的操作介绍
2020/08/06 Javascript
Python探索之Metaclass初步了解
2017/10/28 Python
Python最小二乘法矩阵
2019/01/02 Python
将Pytorch模型从CPU转换成GPU的实现方法
2019/08/19 Python
python 下划线的不同用法
2020/10/24 Python
Python3 用matplotlib绘制sigmoid函数的案例
2020/12/11 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
如何使用html5与css3完成google涂鸦动画
2012/12/16 HTML / CSS
审计工作个人的自我评价
2013/12/25 职场文书
公司接待方案
2014/03/08 职场文书
教师师德承诺书
2014/03/26 职场文书
暑假家长评语大全
2014/04/17 职场文书
活动策划求职信模板
2014/04/21 职场文书
副科级后备干部考察材料
2014/05/15 职场文书
应急管理培训方案
2014/06/12 职场文书
分公司总经理岗位职责
2014/08/03 职场文书
物流专业专科生职业生涯规划书
2014/09/14 职场文书
岗位聘任协议书
2015/09/21 职场文书
大队委员竞选稿
2015/11/20 职场文书
Nginx+Tomcat实现负载均衡、动静分离的原理解析
2021/03/31 Servers
PHP 技巧 * SVG 保存为图片(分享图生成)
2021/04/02 PHP
MySQL 使用自定义变量进行查询优化
2021/05/14 MySQL
Java常用工具类汇总 附示例代码
2021/06/26 Java/Android
Nginx如何获取自定义请求header头和URL参数详解
2022/07/23 Servers