vue如何获取点击事件源的方法
更新时间：2017年08月10日 16:55:19 作者：summer0319
本篇文章主要介绍了vue如何获取点击事件源的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
整理文档，搜刮出一个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>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
响应式就是当对象本身(对象的增删值)或者对象属性(重新赋值)发生变化时,将会运行一些函数,最常见的就是render函数,下面这篇文章主要给大家介绍了关于Vue3响应式原理的相关资料,需要的朋友可以参考下2022-11-11
在vue中我们使用模板HTML语法来组建页面的，使用render函数我们可以用js语言来构建DOM，这篇文章主要介绍了vue中的render函数、h（）函数、函数式组件,需要的朋友可以参考下2023-02-02
这篇文章主要介绍了vue如何使用process.env搭建自定义运行环境，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-01-01
这篇文章主要为大家详细介绍了Vue编写一个挺靠谱的多地区选择组件的方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-08-08
webpack+vue+express(hot)热启动调试简单配置方法
今天小编就为大家分享一篇webpack+vue + express (hot) 热启动调试简单配置方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
这篇文章主要为大家详细介绍了如何使用Vue实现瀑布流,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2024-02-02
这篇文章主要为大家详细介绍了如何使用Vue编写一个简单的日期选择器,文中的示例代码讲解详细,具有一定的借鉴价值,感兴趣的小伙伴可以跟随小编一起学习一下2023-12-12
在Vue.js中使用递归组件可以方便地构建多层级的菜单结构,递归组件适用于处理具有嵌套关系的数据,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧2024-09-09
本篇文章主要介绍了vue 挂载路由到头部导航的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-11-11
实际上在学习过程中,你会发现eslint检查特别讨厌,这个时候我们需要关闭掉eslint检查,下面这篇文章主要给大家介绍了关于在Vue3项目中关闭ESLint的完整步骤,需要的朋友可以参考下2023-11-11
最新评论