v-on的基本使用
语法糖(缩写) @
<template>
<div id="app">
<h2>{{num}}</h2>
<button v-on:click='num--'>-</button>
<button @click="add">+</button>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
num: 0
}
},
methods: {
add() {
this.num ++
}
},
}
</script>
v-on的参数传递
<template>
<div id="app">
<h2>{{num}}</h2>
<button @click='sub(5)'>-5</button>
<button @click="add(10)">+10</button>
</div>
</template>
<script>
export default {
name: 'app',
data() {
return {
num: 0
}
},
methods: {
sub(e) {
this.num -= e
},
add(e) {
this.num += e
}
},
}
</script>