3.v-on 事件绑定

最新推荐文章于 2024-04-19 18:32:11 发布

iqzn.

最新推荐文章于 2024-04-19 18:32:11 发布

阅读量104

点赞数

分类专栏： Vue 学习笔记文章标签： vue.js javascript 前端 html vue

本文链接：https://blog.csdn.net/weixin_49398894/article/details/123549613

版权

学习笔记同时被 2 个专栏收录

23 篇文章 0 订阅

订阅专栏

Vue

10 篇文章 0 订阅

订阅专栏

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script type="text/javascript" src="../JS/vue.js"></script>
</head>
<body>
    <div id="root">
      <button v-on:click="showInfo1">点我提示信息1（不传参）</button><br/>
      <button @click="showInfo2(99)">点我提示信息2（传参）</button><br/>
    </div> 

    <script type="text/javascript">
        Vue.config.productionTip=false
        //创建vue实例
        new Vue({
            el:'#root',
            data:{
                
            },
            methods:{
                showInfo1(){
                    alert("你好")
                },
                showInfo2(number){
                    alert("你好99")
                }
            }
        })
    </script>  
</body>
</html>

在这里插入图片描述

总结：
1.使用v-on:xxx或@xxx绑定事件，其中xxx是事件名;
2.事件的回调需要配置在methods对象中，最终会在vm上;
3.methods中配置的函数，不要用箭头函数!否则this就不是vm了;
4.@click="demo”和 @click="demo($event)”效果一致，但后者可以传参.

iqzn.

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
3.v-on 事件绑定

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <title>Document</title> <script type="text/javascript" src="../JS/vue.js"></script></head><body> <div id="root"&
复制链接

扫一扫

专栏目录