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 读后台cookie代码
Sep 15 Javascript
javascript 使td内容不换行不撑开
Nov 29 Javascript
js中eval()函数和trim()去掉字符串左右空格应用
Feb 02 Javascript
浅谈 jQuery 事件源码定位问题
Jun 18 Javascript
常用的JQuery函数及功能小结
Mar 24 Javascript
jQuery实现的多滑动门,多选项卡效果代码
Mar 28 Javascript
jQuery ztree实现动态树形多选菜单
Aug 12 Javascript
Windows系统下安装Node.js的步骤图文详解
Nov 15 Javascript
QQ跳转支付宝并自动领红包脚本(最新)
Jun 22 Javascript
解决Angular4项目部署到服务器上刷新404的问题
Aug 31 Javascript
Vue render函数实战之实现tabs选项卡组件
Apr 22 Javascript
vue项目打包之开发环境和部署环境的实现
Apr 23 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
将兴奋、喜悦和坎加斯带到戴安娜:亚马逊公主
2020/03/03 欧美动漫
解决laravel id非自增 模型取回为0 的问题
2019/10/11 PHP
JavaScript让IE浏览器event对象符合W3C DOM标准
2009/11/24 Javascript
图像替换新技术 状态域方法
2010/01/28 Javascript
JQuery报错Uncaught TypeError: Illegal invocation的处理方法
2015/03/13 Javascript
详解JavaScript中void语句的使用
2015/06/04 Javascript
json+jQuery实现的无限级树形菜单效果代码
2015/08/27 Javascript
BootStrap智能表单实战系列(十一)级联下拉的支持
2016/06/13 Javascript
jQuery实现公告新闻自动滚屏效果实例代码
2016/07/14 Javascript
详解使用JS如何制作简单的ASCII图与单极图
2017/03/31 Javascript
Express框架之connect-flash详解
2017/05/31 Javascript
vue 2.0项目中如何引入element-ui详解
2017/09/06 Javascript
vue v-model实现自定义样式多选与单选功能
2018/07/05 Javascript
javascript将非数值转换为数值
2018/09/13 Javascript
node实现socket链接与GPRS进行通信的方法
2019/05/20 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
Python实现屏幕截图的两种方式
2018/02/05 Python
python实现简单tftp(基于udp协议)
2018/07/30 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
Python3按一定数据位数格式处理bin文件的方法
2019/01/24 Python
举例讲解Python常用模块
2019/03/08 Python
Python3.5 Pandas模块缺失值处理和层次索引实例详解
2019/04/23 Python
Python 列表的清空方式
2020/01/13 Python
matlab中imadjust函数的作用及应用举例
2020/02/27 Python
Python如何把十进制数转换成ip地址
2020/05/25 Python
pip已经安装好第三方库但pycharm中import时还是标红的解决方案
2020/10/09 Python
python利用opencv保存、播放视频
2020/11/02 Python
Europcar葡萄牙:葡萄牙汽车和货车租赁
2017/10/13 全球购物
美国汽车零部件和配件网站:CarParts
2019/03/13 全球购物
财务会计毕业生自荐信
2013/11/02 职场文书
一月红领巾广播稿
2014/02/11 职场文书
艺术教育实施方案
2014/05/03 职场文书
毕业生求职信
2014/06/10 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
校长新学期致辞
2015/07/30 职场文书
Python线程池与GIL全局锁实现抽奖小案例
2022/04/13 Python