说到v-on就立马事件,最典型的的例子就是按钮的事件我们可以用v-on监听事件,并对用户的输入进行响应。
先举个例子,
上代码:
<html>
<head>
<meta charset="utf-8">
<title>Vue指令之v-on</title>
<script src="https://cdn.bootcss.com/vue/2.2.2/vue.min.js"></script>
</head>
<body>
<div id="app">
<p>{{ message }}</p> //显示data中的message值
<button v-on:click="reverseMessage">反转字符串</button> <!--当点击按钮时会调用methods中的reverseMessage方法-->
</div>
<script>
new Vue({
el: '#app', //作用域为id为app的div块
data: {
message: 'Dream will be realize!' //对应<p>{{ message }}</p>中的message值
},
methods: {
reverseMessage: function () { //注意该函数的写法,是写在methods中的,而不是data中的
this.message = this.message.split('').reverse().join('') //this.message就是data中的message,即其值为Runoob!
}
}
})
</script>
</body>
</html>
输出:
点击一次按钮后:
你会发现,达到了字符串逆序的功能。这是因为button按钮通过v-on的click事件绑定了methods中的函数reverseMessage,
当你去点击按钮后,就会调用methods中的reverseMessage函数去改变data中的message值。
对了:v-on的简写是@符号,比如v-on:click="reverseMessage"等价于@click="reverseMessage",so看到@click不要懵逼哦!!
![](/qrcode.jpg)
通过v-on绑定methods中的函数,实现了常用的点击事件,这个功能在开发中是必用的基础,务必掌握!!!
v-on就讲到这里了,困困困!!!
原创不易,转载请声明出处:https://blog.csdn.net/Kermit_father