首页 > 代码库 > vue获取点击事件源的方法

vue获取点击事件源的方法

2024-10-06 03:08:05   220人阅读

 1 <!DOCTYPE html>
 2 <html lang="zh-CN">
 3     <head>
 4         <meta charset="utf-8">
 5         <title>vue click事件获取当前元素对象</title>
 6         <script src="http://cdnjs.cloudflare.com/ajax/libs/vue/1.0.13/vue.min.js"></script>
 7         <script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
 8     </head>
 9     <body id="app">
10         <ul>
11             <li v-on:click="say(‘hello!‘, $event)" style="background-color:blue;color:white;">点击当前行获取下一行</li>
12             <li>li2</li>
13             <li>li3</li>
14         </ul>
15         <script>
16             new Vue({
17                 el: ‘#app‘,
18                 data: {
19                     message: ‘Hello Vue.js!‘
20                 },
21                 methods: {
22                     say: function(msg, event) { 
23                         //获取点击对象      
24                         var el = event.currentTarget;
25                         var li2text = $(el).next().text();
26                         alert("当前对象的内容："+$(el).text()+" 下一行内容："+li2text);
27                     }
28                 }
29             })
30         </script>
31     </body>
32 </html>

 

vue获取点击事件源的方法


联系
我们