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的计算文本框字数的代码
Jun 06 Javascript
jQuery简单图表peity.js使用示例
May 02 Javascript
JavaScript设计模式之适配器模式介绍
Dec 28 Javascript
javascript中call apply 的应用场景
Apr 16 Javascript
一看就懂:jsonp详解
Jun 01 Javascript
js判断手机访问或者PC的几个例子(常用于手机跳转)
Dec 15 Javascript
基于JavaScript实现文字超出部分隐藏
Feb 29 Javascript
简单实现的JQuery文本框水印插件
Jun 14 Javascript
微信小程序 UI布局常用技巧整理总结
Dec 05 Javascript
gulp安装以及打包合并的方法教程
Nov 19 Javascript
详解微信小程序审核不通过的解决方法
Jan 17 Javascript
Vue-CLI与Vuex使用方法实例分析
Jan 06 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
五款常用mysql slow log分析工具的比较分析
2011/05/22 PHP
一个PHP验证码类代码分享(已封装成类)
2011/07/17 PHP
PHP header函数分析详解
2011/08/06 PHP
PHP中获取文件扩展名的N种方法小结
2012/02/27 PHP
PHP ajax 异步执行不等待执行结果的处理方法
2015/05/27 PHP
用php代码限制国内IP访问我们网站
2015/09/26 PHP
PHP7标量类型declare用法实例分析
2016/09/26 PHP
浅谈PHP拦截器之__set()与__get()的理解与使用方法
2016/10/18 PHP
php实现websocket实时消息推送
2018/03/30 PHP
一个多次搜索+多次传值的解决方案
2007/01/20 Javascript
很酷的javascript loading效果代码
2008/06/18 Javascript
jQuery 常见操作实现方式和常用函数方法总结
2011/05/06 Javascript
javascript获取ckeditor编辑器的值(实现代码)
2013/11/18 Javascript
Jquery的基本对象转换和文档加载用法实例
2015/02/25 Javascript
Javascript中的arguments与重载介绍
2015/03/15 Javascript
jsMind通过鼠标拖拽的方式调整节点位置
2015/04/13 Javascript
学习JavaScript设计模式(单例模式)
2015/11/26 Javascript
JS组件Bootstrap dropdown组件扩展hover事件
2016/04/17 Javascript
Bootstrap表单控件使用方法详解
2017/01/11 Javascript
node.js基于mongodb的搜索分页示例
2017/01/22 Javascript
javascript中new Array()和var arr=[]用法区别
2017/12/01 Javascript
vue动画效果实现方法示例
2019/03/18 Javascript
JavaScript内置对象math,global功能与用法实例分析
2019/06/10 Javascript
实现一个Vue自定义指令懒加载的方法示例
2020/06/04 Javascript
[01:07]2015国际邀请赛 中国区预选赛精彩回顾
2015/06/15 DOTA
Python 将Matrix、Dict保存到文件的方法
2018/10/30 Python
对Python捕获控制台输出流的方法详解
2019/01/07 Python
python实现邮件自动发送
2019/08/10 Python
Python多线程及其基本使用方法实例分析
2019/10/29 Python
Python实现把多维数组展开成DataFrame
2019/11/30 Python
Python利用逻辑回归模型解决MNIST手写数字识别问题详解
2020/01/14 Python
pycharm无法安装第三方库的问题及解决方法以scrapy为例(图解)
2020/05/09 Python
伦敦高达60%折扣的钻石珠宝商:Purely Diamonds
2018/06/24 全球购物
乌克兰的第一家手表店:Deka
2020/03/05 全球购物
销售人员个人求职信
2013/09/26 职场文书
星际争霸:毕姥爷vs解冻03
2022/04/01 星际争霸