Vue Cli（脚手架）实现购物车小案例

首先安装脚手架

npm install -g @vue/cli

然后执行

vue create totalprice

项目创建完成后的目录

在App.vue里面编写代码，如下
  1. <template>
  2.     <div>
  3.         <div v-if="cartlist.length <=0 ">你没有选择的商品，购物车为空， 去购物</div>
  4.         <table v-else>
  5.             <caption>
  6.                 <h1>购物车</h1>
  7.             </caption>
  8.             <tr>
  9.                 <th>选中</th>
  10.                 <th>编号</th>
  11.                 <th>商品名称</th>
  12.                 <th>商品价格</th>
  13.                 <th>购买数量</th>
  14.                 <th>操作</th>
  15.             </tr>
  16.             <tr v-for="(item,index) in cartlist" :key="item.id">
  17.                 <td><input type="checkbox" v-model="item.checkbox"></td>
  18.                 <td>{{item.id}}</td>
  19.                 <td>{{item.name}}</td>
  20.                 <td><small>￥</small>{{item.price.toFixed(2)}}</td>
  21.                 <td>
  22.                     <button @click="item.count--" :disabled="item.count<=1">-</button>
  23.                     {{item.count}}
  24.                     <button @click="item.count++">+</button>
  25.                 </td>
  26.                 <td><a href="#" @click.prevent="del(index)">删除</a></td>
  27.             </tr>
  28.             <tr>
  29.                 <td colspan="3" align="right">总价</td>
  30.                 <td colspan="3">{{totalPrice}}</td>
  31.             </tr>
  32.         </table>
  33.     </div>
  34. </template>
  35. <script>
  36.     export default {
  37.         name: 'App',
  38.         data() {
  39.             return {
  40.                 cartlist: [{
  41.                         id: 1,
  42.                         checkbox: true,
  43.                         name: '《细说PHP》',
  44.                         price: 10,
  45.                         count: 1
  46.                     },
  47.                     {
  48.                         id: 2,
  49.                         checkbox: true,
  50.                         name: '《细说网页制作》',
  51.                         price: 10,
  52.                         count: 1
  53.                     },
  54.                     {
  55.                         id: 3,
  56.                         checkbox: true,
  57.                         name: '《细说JavaScript语言》',
  58.                         price: 10,
  59.                         count: 1
  60.                     },
  61.                     {
  62.                         id: 4,
  63.                         checkbox: true,
  64.                         name: '《细说DOM和BOM》',
  65.                         price: 10,
  66.                         count: 1
  67.                     },
  68.                     {
  69.                         id: 5,
  70.                         checkbox: true,
  71.                         name: '《细说Ajax与jQuery》',
  72.                         price: 10,
  73.                         count: 1
  74.                     },
  75.                     {
  76.                         id: 6,
  77.                         checkbox: true,
  78.                         name: '《细说HTML5高级API》',
  79.                         price: 10,
  80.                         count: 1
  81.                     },
  82.                 ]
  83.             }
  84.         },
  85.         methods: {
  86.             del(index) {
  87.                 //根据索引删除商品
  88.                 this.cartlist.splice(index, 1);
  89.             }
  90.         },
  91.         computed: {
  92.             totalPrice: {
  93.                 get() {
  94.                     let sum = 0;
  95.                     for (let book of this.cartlist) {
  96.                         if (book.checkbox) {
  97.                             //计算商品价格
  98.                             sum += book.price * book.count;
  99.                         }
  100.                     }
  101.                     return '￥' + sum.toFixed(2);
  102.                 }
  103.             }
  104.         }
  105.     }
  106. </script>
  107. <style scoped>
  108.     table {
  109.         width: 600px;
  110.         border: 1px solid #888888;
  111.         border-collapse: collapse;
  112.     }
  114.     th {
  115.         background: #ccc;
  116.     }
  118.     td,
  119.     th {
  120.         border: 1px solid #888888;
  121.         padding: 10px;
  122.     }
  123. </style>
运行 npm run serve
效果展示

更多相关文章

  1. Android(安卓)自动化测试工具Robotium 之Solo类的详细说明
  2. AndroidManifest.xml - activity 详细说明
  3. AndroidManifest.xml - activity 详细说明
  4. android RelativeLayout(相对布局)详细说明
  5. ANDROID相对布局详细说明
  6. 商城列表页及商品详情页
  7. 购物车和订单页
  8. 某商城登录注册-购物车订单支付-个人中心所有页面
  9. 购物车页面

随机推荐

  1. Android(安卓)安全机制
  2. Android(安卓)adb 命令大全
  3. Android(安卓)Content Provider[转]
  4. Android事件分发机制详解（二）
  5. Android(安卓)客户端与服务器端进行数据
  6. android(18)_数据存储与访问_SQLite数据
  7. 解决Android(安卓)4.2.2 脱机(offline)问
  8. android学习-动画（基本的四种动画）
  9. 设置showAsAction="always"无效的问题
  10. 超级简单的应用虚拟化软件 [RemoteApp To