Vue · 2022年6月20日 0

v-on事件

v-on用来为元素绑定事件,绑定以后就会监听对应的事件。v-on有两种写法,一种为详细指令v-on。一种为简写指令@。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>v-on事件</title>
</head>
<body>
    <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
<div id ="app">
    <input type="button" value="v-on详细指令" v-on:click="doIt"><br>
    <input type="button" value="v-on简写指令" @click="doIt"><br>
    <input type="button" value="双击事件" @dblclick="doIt">
    <!--tips:dbclick在Vue中应该写为dblclick-->
</div>
    <script>
        var app=new Vue({
            el:"#app",
            methods:{
                doIt:function(){
                    alert("这是一个v-on弹窗");
                }
            },
        })
    </script>

</body>
</html>

效果在线演示:

v-on事件