vue获取当前点击事件

vue click事件获取当前元素对象点击当前行获取下一行li2li3new Vue({el: '#app',

javascript艺术

5447人浏览 · 2017-11-30 11:44:21

javascript艺术 · 2017-11-30 11:44:21 发布

<!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>
			<--调用方法@click="say($event)"    参数传的是$event-->
            <li v-on:click="say($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(event) { 
                        //获取点击对象      
                        var el = event.currentTarget;     //获取点击的对象
                        var li2text = $(el).next().text();    //获取当前点击事件的元素$(el);
                    }
                }
            })
        </script>
    </body>
</html>


  
  
   
   
  
  
  
  
   
   欢迎关注我的个人技术公众号！javascript艺术

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^