首页 > 其他分享 >vue中的事件处理

vue中的事件处理

时间:2022-10-28 10:45:46浏览次数:66  
标签:事件处理 vue number 提示信息 address event

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <script type="text/javascript" src="../js/vue.js"></script>

    <title>vue中的事件处理</title>
</head>
<body>
    <div id="root">
        <!-- 事件回调需要配置再methods中,最终会在vm上
        methods中的配置函数不要用箭头函数
        mehods中配置的函数,都是vue管理的哈数,this指向vm或者组件实例对象
         -->
        <h1>名字 :{{name}}</h1>
        <h1>地址 :{{address}}</h1>
        <!-- 事件指令v-on 有简写写法@ -->
        <button v-on:click="shouwInfo1"> 点我提示信息1(不传参)</button>
        <!-- 事件传参$event:这个为事件内置参数,后面可再加别的参数-->
        <button @click="shouwInfo2($event,66)"> 点我提示信息2(传参)</button>
    </div>
    <script>    
        const vm=new Vue({
            el:"#root",
            data:{
                name:"xiao  bai",
                address:"bei  jing"
            },
            methods:{
                shouwInfo1(){
                    alert("你好")
                },
                shouwInfo2($event,number){//这里接收参数
                    console.log(event,number);
                   alert("你吃了吗")
                }
            }
        })
    </script>

</body>
</html>

 

标签:事件处理,vue,number,提示信息,address,event
From: https://www.cnblogs.com/xiaobaizitaibai/p/16835018.html

相关文章