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中add实现同时选择两个id对象
Oct 22 Javascript
仅img元素创建后不添加到文档中会执行onload事件的解决方法
Jul 31 Javascript
对jQuery的事件绑定的一些思考(补充)
Apr 20 Javascript
比较新旧两个数组值得增加和删除的JS代码
Oct 30 Javascript
分享纯手写漂亮的表单验证
Nov 19 Javascript
bootstrap配合Masonry插件实现瀑布式布局
Jan 18 Javascript
Bootstrap弹出框(Popover)被挤压的问题小结
Jul 11 Javascript
详解用node搭建简单的静态资源管理器
Aug 09 Javascript
基于js原生和ajax的get和post方法以及jsonp的原生写法实例
Oct 16 Javascript
Angular4编程之表单响应功能示例
Dec 13 Javascript
jQuery第一次运行页面默认触发点击事件的实例
Jan 10 jQuery
vue element 中的table动态渲染实现(动态表头)
Nov 21 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
虹吸壶煮咖啡26个注意事项
2021/03/03 冲泡冲煮
PHP使用反射机制实现查找类和方法的所在位置
2016/04/22 PHP
PHP微信开发用Cache 解决数据缓存
2016/07/11 PHP
PHP+原生态ajax实现的省市联动功能详解
2017/08/15 PHP
PHP通过GD库实现验证码功能示例
2019/02/23 PHP
PHP实现的AES 128位加密算法示例
2019/09/16 PHP
javascript单引号和双引号的区别和处理
2014/05/14 Javascript
node.js中的fs.utimes方法使用说明
2014/12/15 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
canvas绘制表盘时钟
2017/01/23 Javascript
ES6深入理解之“let”能替代”var“吗?
2017/06/28 Javascript
解决canvas画布使用fillRect()时高度出现双倍效果的问题
2017/08/03 Javascript
js中的闭包学习心得
2018/02/06 Javascript
小程序日历控件使用方法详解
2018/12/29 Javascript
浅析vue中的MVVM实现原理
2019/03/04 Javascript
php结合js实现多条件组合查询
2019/05/28 Javascript
JavaScript Array对象使用方法解析
2019/09/24 Javascript
[06:01]刀塔次级联赛top10第一期
2014/11/07 DOTA
Python序列之list和tuple常用方法以及注意事项
2015/01/09 Python
python中引用与复制用法实例分析
2015/06/04 Python
Python之日期与时间处理模块(date和datetime)
2017/02/16 Python
Python搭建FTP服务器的方法示例
2018/01/19 Python
Python实现的旋转数组功能算法示例
2019/02/23 Python
使用Python操作FTP实现上传和下载的方法
2019/04/01 Python
Python Web静态服务器非堵塞模式实现方法示例
2019/11/21 Python
Python如何爬取qq音乐歌词到本地
2020/06/01 Python
如何用python批量调整视频声音
2020/12/22 Python
乌克兰在线电子产品商店:MTA
2019/11/14 全球购物
Hotels.com泰国:酒店预订网站
2019/11/20 全球购物
分布式数据库需要考虑哪些问题
2013/12/08 面试题
信息学院毕业生自荐信范文
2014/03/04 职场文书
支部组织生活会方案
2014/06/10 职场文书
作风转变心得体会
2014/09/02 职场文书
社区艾滋病宣传活动总结
2015/05/07 职场文书
小学运动会加油词
2015/07/18 职场文书
党章党规党纪学习心得体会
2016/01/14 职场文书