<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="./vue.js"></script>
</head>
<body>
<div id="app">
<button v-on:click='fn'>点击</button>
<!-- 用v-on:给事件绑定方法 -->
<!-- 此例中给点击事件绑定方法fn -->
<!-- 注:v-on: 可以简写成@ -->
<button @click='fn'>点击</button>
<!-- 给方法传参 -->
<button @click='fun(100)'>fun</button>
<!-- 数据可以直接当成参数使用 -->
<button @click='fun(a)'>fun</button>
</div>
<script type="text/javascript">
let vm = new Vue({
el:'#app',
data(){
return{
a:10
}
},
methods:{
// vue实例所需要的方法,定在在methods属性对象中
// 当按钮被点击时,执行fn方法
fn(){
alert(123)
// 在方法中使用实例的数据,需要加this
alert(this.a)
},
// 定义带有参数的方法
fun(num){
alert(num)
}
}
})
</script>
</body>
</html>
v-on绑定事件例子
最新推荐文章于 2024-04-21 18:51:25 发布
本文详细讲解了Vue.js中v-on指令的使用,通过实例展示如何绑定和处理各种JavaScript事件,包括点击、键盘输入等。同时,探讨了事件修饰符的运用,以实现更精细的事件控制。
摘要由CSDN通过智能技术生成