本文主要是介绍vue实现简算商品价格，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！
要求：设定商品的价格和数量，自动得出商品总价。
methods 中的方法不哟啊使用箭头函数，否则绑定的是window；
EcmaScript 6为对象成员方法提供了一种简写的方式；
handleCountClick (){this.count++; }的写法等价与 handleCountClick : function(){},它没有任何特性，只是纯粹的简写了
其实加的那个button的按钮标签里可以直接写 v-on:click=“count++” ，效果一样。
代码如下 ：
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title></title>
</head>
<body>
<div id="app"><div><label for="">商品价格</label><input type="number" v-model="price"/></div><div><label for="">商品数量</label><button v-on:click="count = count - 1 < 0 ? 0 :count-1">-</button><span>{{count}}</span><button v-on:click="handleCountClick">+</button></div><div>总价格: <strong>{{ price * count }}</strong></div>
</div>
<script src="../vue.js"></script>
<script>const app = new Vue({el:"#app",data:{price:5,count:2},methods:{handleCountClick (){this.count++;}}});
</script></body>
</html>
显示效果如下：
这篇关于vue实现简算商品价格的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
![C#实战|大乐透选号器[6]：实现实时显示已选择的红蓝球数量](https://i-blog.csdnimg.cn/direct/cda2638386c64e8d80479ab11fcb14a9.png)
