Vue初学06-v-on

最新推荐文章于 2022-06-04 21:14:15 发布

置顶周达

最新推荐文章于 2022-06-04 21:14:15 发布

阅读量165

点赞数 1

分类专栏： vue 文章标签： vue事件绑定 vue事件参数

本文链接：https://blog.csdn.net/gis_zhouda/article/details/104839031

版权

vue 专栏收录该内容

37 篇文章 0 订阅

订阅专栏

v-on用于绑定事件监听器。事件类型由参数指定。表达式可以是一个方法的名字或一个内联语句，如果没有修饰符也可以省略。

click事件绑定

v-on:click="表达式"，可以简写为@click

以绑定按钮的点击事件为例，

表达式为内联语句的情况：直接设置事件表达式为counter++，counter--，控制counter的增减。

<body>
    <div id="app">
           <p>{{counter}}</p>
            <button v-on:click="counter++">+</button>
            <button v-on:click="counter--">-</button>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                counter:0
            }
        });
    </script>
</body>

表达式为方法名的情况：通过绑定函数控制counter的增减。

<body>
    <div id="app">
           <p>{{counter}}</p>
            <button v-on:click="add">+</button>
            <button v-on:click="sub">-</button>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                counter:0
            },
            methods:{
                add(){
                   this.counter++;
               },
               sub(){
                   this.counter--;
               }
            }
        });
    </script>
</body>

事件参数

1.没有参数的情形，如上所示

事件绑定可以写成v-on:click="add"或者v-on:click="add()"

2.有参数的情形,比如上面的例子改成每次加减2,2通过参数传递

<body>
    <div id="app">
           <p>{{counter}}</p>
            <button v-on:click="add(2)">+2</button>
            <button v-on:click="sub(2)">-2</button>            
    </div>
    <script>
        const vue = new Vue({
            el:"#app",
            data:{
                counter:0
            },
            methods:{
                add(inc){
                   this.counter+=inc;
               },
               sub(inc){
                   this.counter-=inc;
               }
            }
        });
    </script>
</body>

3.参数中含有event对象的情形

如果函数定义中只有event参数，事件绑定的时候没有写参数（没有写()），默认会把event作为参数传递

<body>
    <div id="app">
            <button v-on:click="dothis">event</button>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            methods:{
                dothis(e){
                     console.log(e);
               }
            }
        });
    </script>
</body>

结果如下：

如果既有event参数，又有其他参数，事件绑定的时候没有写参数，还是会默认把event传递给第一个参数。

<body>
    <div id="app">
            <button v-on:click="dothis">event</button>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            methods:{
                dothis(num,event){
                     console.log("------"+num+"------"+event);
               }
            }
        });
    </script>
</body>

结果如下：

如果既有event参数，又有其他参数，传递event参数时要写成$event

<body>
    <div id="app">
            <button v-on:click="dothis(123,$event)">event</button>
    </div>

    <script>
        const vue = new Vue({
            el:"#app",
            methods:{
                dothis(num,event){
                     console.log("------"+num+"------"+event);
               }
            }
        });
    </script>
</body>

结果如下：