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性能
Feb 24 Javascript
javascript处理表单示例(javascript提交表单)
Apr 28 Javascript
javascript实现简单的全选和反选功能
Jan 05 Javascript
使用jQuery或者原生js实现鼠标滚动加载页面新数据
Mar 06 Javascript
ES6中Math对象的部分扩展
Feb 20 Javascript
Vue 父子组件数据传递的四种方式( inheritAttrs + $attrs + $listeners)
May 04 Javascript
详解ES6 Promise对象then方法链式调用
Oct 20 Javascript
利用Vconsole和Fillder进行移动端抓包调试方法
Mar 05 Javascript
JavaScript中工厂函数与构造函数示例详解
May 06 Javascript
新手简单了解vue
May 29 Javascript
vue滑动吸顶及锚点定位的示例代码
May 10 Javascript
VUE页面中通过双击实现复制表格中内容的示例代码
Jun 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
PHP5常用函数列表(分享)
2013/06/07 PHP
php验证session无效的解决方法
2014/11/04 PHP
php通过两层过滤获取留言内容的方法
2016/07/11 PHP
thinkPHP框架整合tcpdf插件操作示例
2018/08/07 PHP
使用laravel指定日志文件记录任意日志
2019/10/17 PHP
利用404错误页面实现UrlRewrite的实现代码
2008/08/20 Javascript
javascript中的float运算精度实例分析
2010/08/21 Javascript
js字符串的各种格式的转换 ToString,Format
2011/08/08 Javascript
使用JavaScript 实现对象 匀速/变速运动的方法
2013/05/08 Javascript
iframe子父页面调用js函数示例
2013/11/07 Javascript
控制文字内容的显示与隐藏示例
2014/06/11 Javascript
jquery操作 iframe的方法
2014/12/03 Javascript
JS实现让网页背景图片斜向移动的方法
2015/02/25 Javascript
今天抽时间给大家整理jquery和ajax的相关知识
2015/11/17 Javascript
JavaScript简单实现弹出拖拽窗口(一)
2016/06/17 Javascript
基于JavaScript实现报警器提示音效果
2017/10/27 Javascript
在Vue中使用echarts的方法
2018/02/05 Javascript
解决vue-router进行build无法正常显示路由页面的问题
2018/03/06 Javascript
深入koa-bodyparser原理解析
2019/01/16 Javascript
vue.js实现二级菜单效果
2019/10/19 Javascript
JS倒计时两种实现方式代码实例
2020/07/27 Javascript
[03:17]DOTA2英雄基础教程 剧毒术士
2013/12/12 DOTA
python中类的一些方法分析
2014/09/25 Python
Python入门_浅谈逻辑判断与运算符
2017/05/16 Python
Python数据类型之Dict字典实例详解
2019/05/07 Python
Python列表嵌套常见坑点及解决方案
2020/09/30 Python
解决pycharm修改代码后第一次运行不生效的问题
2021/02/06 Python
会计岗位职责范本
2014/03/07 职场文书
生日礼品店创业计划书范文
2014/03/21 职场文书
《忆江南》教学反思
2014/04/07 职场文书
光棍节联谊晚会活动策划书
2014/10/10 职场文书
学习党的群众路线教育实践活动心得体会范文
2014/11/03 职场文书
毕业生个人总结
2015/02/28 职场文书
投诉书格式范本
2015/07/02 职场文书
2019年年中职场激励人心语录30条
2019/08/07 职场文书
解决pytorch 损失函数中输入输出不匹配的问题
2021/06/05 Python