VUE.JS实现购物车功能
购物车是电商必备的功能,可以让用户一次性购买多个商品,常见的购物车实现方式有如下几种: 1. 用户更新购物车里的商品后,页面自动刷新。 2. 使用局部刷新功能,服务器端返回整个购物车的页面html 3. 服务器端返回JSON格式,使用模板引擎+dom操作更新页面 最近新学习了vue.js,一个轻量级的mvvm(Model-View-ViewModel),vue.js是数据驱动无须操作dom,它提供特殊的html语言,把dom和数据绑定在一起,一旦修改了数据,dom将会自动更新更新。 关于vue.js的学习,请参考《 Vue.js——60分钟快速入门 》这篇文章或者去官网 https://cn.vuejs.org/ 学习。 下面就是用vue.js实现购物车。 第一步 定义view: <div class="con"> <h1>购物车程序</h1> <table class="table"> <tr> <th>序号</th> <th>商品</th> <th>单价</th> <th>数量</th> <th>小计</th> <th>操作</th> </tr> <tr v-for="x in goods_list"> <td>{{x.id}}</td> <td>{{x.name}}</td> <td class="price">¥{{x.price}}</td> <td> <input