使用v-on指令监听DOM事件
事件
监听事件:
可以使用v-on指令监听DOM事件,并在触发时运行一些javaScript代码。
语法格式:
v-on:click="表达式"
语法糖格式:
@click="表达式"
其中,表达式可以直接使用javafScript语句,也可以是一个在Vue实例中methods选项内的方法名: funcName(param)
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<!--引入最新的vue稳定版本-->
<script type="text/javascript" src="https://unpkg.com/vue/dist/vue.min.js"></script>
<link rel="stylesheet" href="./css/style.css" type="text/css">
</head>
<body>
<div id="app">
点击次数为: {{counter}}
<button v-on:click="handleAdd(1)">点击按钮加1</button>
<button v-on:click="handleAdd(10)">点击按钮加10</button>
</div>
<script>
var vue=new Vue({
el:'#app',
data:{
counter: 0
},
methods: {
handleAdd: function (count) {
count=count || 1;
this.counter=this.counter+count;
}
}
});
</script>
</body>
</html>
-注释说明
在methods中我们定义了我们需要的方法供@click调用,需要注意的是,@click调用的方法名后可以不跟括号"()"。
此时,如果该方法有参数,默认会将原生事件对象event传入。在大部分业务场景中,如果方法不需要传入参数,为了
简便可以不写括号。
运行结果: