vue获取点击事件源的方法

微wx笑 2021-01-14【前端开发】226 4 0关键字： vue 事件源

vue获取点击事件源的方法<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>vue click事件获取当前元素对象</title> <script src="htt

vue获取点击事件源的方法

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