VUE指令及用法大全——（三）v-on事件绑定

最初都是小白

于 2019-04-09 10:50:35 发布

阅读量616

点赞数 1

分类专栏： Vue 文章标签： vue事件绑定 v-on指令详解

本文链接：https://blog.csdn.net/Originally_M/article/details/89097299

版权

Vue 专栏收录该内容

36 篇文章 3 订阅

订阅专栏

语法：v-on:（一般简写成一个@）

代码演示：

<!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">
    <title>v-on绑定事件</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
    <div id="app">
        <!-- v-on绑定事件 在methods中处理 -->
        <button v-on:click="btnclick">点击触发</button>

        <!-- 小括号代表传参 -->
        <button v-on:mouseover="btnclick(123)">移入触发</button>

        <!-- 简写 直接在前面写一个@-->
        <button @mouseover="btnclick(123)">移入触发</button>
    </div>
<script>
    var vm = new Vue({
        el:'#app',
        data:{
            msg:'Hello XiaoMeiZi!',
            flag:true,
            titleStr:'v-bind动态绑定'
        },
        methods:{
            // methods中 可以定义事件处理函数
            // btnclick:function(arg){
            //     console.log('ok');
            // }
                //可以简写
                btnclick(arg){
                console.log('ok'+arg);
            }
        }
    })
</script>
</body>
</html>