在Vue实例中,可以在methods选项内定义一个方法,通过使用v-on指令监听这个按钮的点击事件,并在触发时调用这个方法。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script type="text/javascript" src="js/vue.js"></script> </head> <body> <div id="app"> 购买数量:{{quantity}} <button @click="add()">+</button> <button v-if="quantity>0" @click="subtract()">-</button> <script> var app = new Vue({ el:'#app', data:{ quantity:0 }, methods:{ add:function () { //this指向当前Vue实例app this.quantity+=1;//修改data中的quantity的值 }, subtract:function () { //this指向当前Vue实例app this.quantity-=1;//修改data中的quantity的值 } } }) </script> </div> </body> </html>