vue四种事件触发方式
- 不定义事件函数,直接通过 v-on 处理事件(只能处理简单的事件)
<div id="app">
<!-- 1. 不定义事件函数 -->
<button @click="num++">按钮{
{num}}</button>
</div>
<script>
new Vue({
el:'#app',
data:{
num:1,
},
</script>
运行结果:
点击按钮时,数值会执行累加操作。
- 定义事件函数,在 methods 中写方法,在标签中通过v-on添加事件调用函数方法(可以处理稍微复杂的计算)
<div id="app">
<!-- 2. 定义事件处理函数 -->
<button @click="add">按钮{
{number}}</button>
</div>
<script>
new Vue({
el:'#app',
data:{
number:1,
},
methods:{
add