首页 > 技术文章 > Vue绑定事件

saxonsong 2021-07-07 16:49 原文

Vue绑定事件

  • v-on

    v-on监听事件

    代码:

    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Title</title>
    </head>
    <body>
    <!--view层-->
    <div id="app">
        <button v-on:click="sayHi">click me</button>
    </div>
    <!--  1.导入Vue.js  -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2.5.21/dist/vue.min.js"></script>
    <script>
        var vm = new Vue({
            el: "#app",
            data:{
                message: "你好"
            },
            methods: {
                sayHi:function (event) {//方法必须定义在Vue的methods对象中,v-on:事件
                    //'this'在方法里面指向当前Vue实例
                    alert(this.message);
                }
            }
        });
    </script>
    </body>
    </html>
    

推荐阅读