8. v-on指令的补充说明
- 传递自定义参数 : 函数调用传参
- 事件修饰符: 对事件触发的方式进行限制
代码示例：
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<script src="../js/vue.js"></script>
</head>
<body>
<div id="app">
<!-- 函数传参 -->
<input type="button" value="带参按钮" v-on:click="show(700,'老铁666')" />
<!-- 事件修饰符 ：只要input输入就触发函数-->
<input type="text" @keyup="hi" />
<!-- 时间修饰符：只有按enter键才触发函数 -->
<input type="text" @keyup.enter="hi2" />
</div>
</body>
<script>
var obj = new Vue({
el: "#app",
data: {
},
methods: {
show:function(p1,p2){
console.log(p1);
console.log(p2);
},
hi:function(){
alert("就是这样的！");
},
hi2:function(){
alert("我按了enter键！");
}
},
});
</script>
</html>
效果展示：
总结
- 事件绑定方法,可以传入自定义参数
- 定义方法时,需要定义形参,来接收实际的参数
- 事件的后面跟上 .修饰符 可以对事件进行限制
- .enter 可以限制触发的按键为回车
- 事件修饰符有许多 使用时可以查询文档