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 相关文章推荐
Ctrl+Enter提交内容信息
Jun 26 Javascript
使用onbeforeunload属性后的副作用
Mar 08 Javascript
javascript重复绑定事件造成的后果说明
Mar 02 Javascript
非常漂亮的JS+CSS图片幻灯切换特效
Nov 20 Javascript
javascript实现文本域写入字符时限定字数
Feb 12 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
JavaScript中的函数声明和函数表达式区别浅析
Mar 27 Javascript
D3.js封装文本实现自动换行和旋转平移等功能
Oct 14 Javascript
jsonp跨域获取数据的基础教程
Jul 01 Javascript
vue 双向数据绑定的实现学习之监听器的实现方法
Nov 30 Javascript
JS数组中对象去重操作示例
Jun 04 Javascript
Vue的状态管理vuex使用方法详解
Feb 05 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
fckeditor上传文件按日期存放及重命名方法
2015/05/22 PHP
php实现Mysql简易操作类
2015/10/11 PHP
PHP中each与list用法分析
2016/01/08 PHP
php flush无效,IIS7下php实时输出的方法
2016/08/25 PHP
JS window.opener返回父页面的应用
2009/10/24 Javascript
js或css文件后面跟参数的原因说明
2010/01/09 Javascript
niceTitle 基于jquery的超链接提示插件
2010/05/31 Javascript
JQuery 选择器、过滤器介绍
2011/02/14 Javascript
javascript中节点的最近的相关节点访问方法
2013/03/20 Javascript
javascript新建标签,判断键盘输入,以及判断焦点(示例代码)
2013/11/25 Javascript
jquery实现点击弹出层效果的简单实例
2014/03/03 Javascript
javascript实现在下拉列表中显示多级树形菜单的方法
2015/08/12 Javascript
jQuery Ajax和getJSON获取后台普通json数据和层级json数据用法分析
2016/06/08 Javascript
picLazyLoad 实现图片延时加载(包含背景图片)
2016/07/21 Javascript
jQuery Mobile和HTML5开发App推广注册页
2016/11/07 Javascript
深入nodejs中流(stream)的理解
2017/03/27 NodeJs
整理关于Bootstrap排版的慕课笔记
2017/03/29 Javascript
深入解析Vue 组件命名那些事
2017/07/18 Javascript
JS+canvas画一个圆锥实例代码
2017/12/13 Javascript
Vue中如何实现proxy代理
2018/04/20 Javascript
vue中路由跳转不计入history的操作
2020/09/21 Javascript
[45:44]完美世界DOTA2联赛PWL S2 FTD vs PXG 第一场 11.27
2020/12/01 DOTA
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
用python求一重积分和二重积分的例子
2019/12/06 Python
Python迭代器模块itertools使用原理解析
2019/12/11 Python
Python Scrapy图片爬取原理及代码实例
2020/06/12 Python
python有几个版本
2020/06/17 Python
Django数据统计功能count()的使用
2020/11/30 Python
Html5导航栏吸顶方案原理与对比实现
2020/06/10 HTML / CSS
ALLSAINTS英国官网:伦敦新锐潮流品牌
2016/09/19 全球购物
工地质量标语
2014/06/12 职场文书
青春飞扬演讲稿
2014/09/11 职场文书
灵山大佛导游词
2015/02/04 职场文书
实习生个人总结范文
2015/02/28 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
php 解析非标准json、非规范json
2021/04/01 PHP