<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <script src="vue.js/vue.js"></script> <script src="vue.js/jquery-1.7.1.min.js"></script> </head> <body> <div id="app"> <button v-on:click='jia' type="button">+</button> <p>数量：{{num}}</p> <p>单价：{{price}}</p> <hr> <p>总价：{{all}}</p> <button @click='jian' type="button">-</button> <!--v-on==@ 简写--> </div> <script> var vm=new Vue({ el:"#app", data:{ num:0, price:10, all:0 }, methods:{ jia:function(){ this.num++; this.all=this.num*this.price }, jian:function(){ this.num--; if(this.num<0){ this.num=0 } this.all=this.num*this.price } }, watch:{//监听 "num":function(){ if(this.num>3){ this.all=this.all-this.price } } } }) </script> </body> </html>
v-on
最新推荐文章于 2023-06-13 16:02:56 发布
1万+
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
