- 案例（采购）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="../js/vue.min.js" type="text/javascript" charset="utf-8"></script> </head> <body> <div id="box"> <p>ipad</p> <p>单价: {{ price }}</p> <p>库存: {{ storage }} </p> <p>要购买的商品数量： <button @click="sub()">-</button> <span> {{ buyNum }} </span> <button v-on:click="add()">+</button> </p> <p>总金额: {{ total }}</p> <p>有否包邮(满10件包邮): {{ baoyou }}</p> </div> <script> var vue = new Vue({ el:"#box", data:{ price:200, // 单价 storage:15, // 库存量 buyNum:0 // 购买量 }, // 事件对象的行为 methods:{ add:function(){ this.buyNum++ }, sub:function(){ this.buyNum-- } }, // 计算调用的 computed:{ total:function(){ // this表示的是vue对象 return this.price * this.buyNum }, baoyou:function(){ return this.buyNum >= 10 ? "包邮" : "不包邮" } }, // 监听 数据的变化 watch:{ buyNum:function(newVlaue, oldVlue){ console.log(newVlaue + "----" + oldVlue) if(newVlaue > this.storage || newVlaue < 0){ this.buyNum = oldVlue } } } }) </script> </body> </html>
8507
10-22
“相关推荐”对你有帮助么？
-
非常没帮助 -
没帮助 -
一般 -
有帮助 -
非常有帮助
提交
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
