| <!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> | |