前端开发您现在的位置是:首页 > 博客日志 > 前端开发

vue获取点击事件源的方法

<a href='mailto:'>微wx笑</a>的头像微wx笑2021-01-14 09:13:17前端开发人已围观关键字: 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>


1Mu编程技术_踩坑日志_进阶指南_无知人生

本文为转载文章,版权归原作者所有,不代表本站立场和观点。

很赞哦! () 有话说 ()

上一篇:vue视图不更新情况

下一篇:返回列表