19 一个按钮调用两个方法,事件中的event对象

DOCTYPE html>


    
    
    Demo19
    


    


    const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{},
    template:`
      
目前已点报名的小伙伴数量{{count}}.
      增加一位小伙伴
        ` 
    }) 
    const vm=app.mount("#app")

显示了目前的报名小伙伴数量，数量是在data中定义的变量count。然后有一个按钮。现在要做的就是每点击一下按钮，让数量加1。

到这里小伙伴可以不先向下看，自己先写一下。

先在methods里写一个方法，我这里给方法起名字叫addCountClick( )，代码如下:

methods:{
    addCountClick(){
        this.count++;
    },
},

然后在button上绑定这个响应事件。

template:`
    
目前已点报名的小伙伴数量{{count}}.
    增加一位小伙伴
    ` 
})

这时候你可以打开浏览器预览一下效果，当你点击按钮时，”小伙伴”的数量就会不断增加。

    
    
    Demo19
    


    


    const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCountClick(){
            this.count++;
        },
    },
    template:`
        
目前已点报名的小伙伴数量{{count}}.
        增加一位小伙伴
        ` 
    })
    const vm=app.mount("#app")

直接用表达式实现

你还可以使用更简单的方法，不在methods中写任何的响应方法，而是使用表达式来编写。

增加一位小伙伴

这看起来更见的简单了，保持代码的精简，是一个程序员应有的追求，但这样灵活性也会比较差。

事件中的event对象

在编写响应事件时，是可以接受一个event参数的，这个参数就是关于响应事件的一些内容。我们直接打印出event，你会发现内容比较多，其实这些参数还是值得一看的，在工作中有时真的会用到。

methods:{
    addCountClick(event){
        this.count++;
        console.log(event)
    },
},

这时候你可以打开浏览器，然后打开控制台查看一下效果。可以看到event的内容非常多，想直观看到是那个DOM元素触发事件，可以使用target属性。

console.log(event.target)

这看起来更见的简单了，保持代码的精简，是一个程序员应有的追求，但这样灵活性也会比较差。

单参数/多参数的传递

先来看传入单独的参数，比如现在每次点击小伙伴的增量不再是1，而是2，就可以这样来编写。

methods:{
    addCountClick(num){
        this.count+=num
    },
},
template:`
    增加一位小伙伴
    ` 
})

有参数的情况下使用event

这时候你还想使用event参数，那需要如何编写呢，方法是参数增加$event。

methods:{
    addCountClick(num,event){
        this.count+=num;
        console.log(event.target)
    },
},
template:`
    
目前已点报名的小伙伴数量{{count}}.
    增加一位小伙伴
    ` 
})

总结一下： 在有多个参数的情况下，要继续使用event，需要在调用的地方使用$event，进行传递参数，然后在方法上正常接收就可以了。

    
    
    Demo19
    


    


const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        addCountClick(num,event){
            this.count+=num;
            console.log(event.target)
        },
    },
    template:`
        
目前已点报名的小伙伴数量{{count}}.
        增加一位小伙伴
        ` 
    })
const vm=app.mount("#app")

一个按钮调用两个方法

在有些复杂的需求中，是需要点击一个按钮，同时执行两个方法的。

先写两个方法 handleBtnClick1 和 handleBtnClick2 ，每个方法里的业务逻辑，就是弹出一个alert。代码如下：

methods:{
    //...
    handleBtnClick1(){
        alert(1)
    },
    handleBtnClick2(){
        alert(2)
    },
},

在模板的按钮中可以这样使用这两个方法：

增加一位小伙伴

这里需要注意的是: 调用方法的时候，要加括号上()，如果不加，调用是无效的。

总结一下： 如果想在模板中一次触发两个事件方法，需要 用,逗号，把事件隔开，然后每个事件后边必须加括号上()才能起作用。

本文就先到这里了，下节继续讲解绑定事件的修饰符。

    
    
    Demo19
    


    


const app=Vue.createApp({ 
    data(){
        return{
            count:0
        }
    },
    methods:{
        //...
        handleBtnClick1(){
            alert(1)
        },
        handleBtnClick2(){
            alert(2)
        },
    },
    template:`
        增加一位小伙伴
        ` 
    })
const vm=app.mount("#app")