• 案例：购物车（Vue基础）

    1. 案例说明：

    1. 在界面上以表格的形式，显示一些书籍的数据；
    2. 点击+或者-可以增加或减少书籍数量（如果为1，那么不能继续-）；
    3. 点击移除按钮，可以将书籍移除；
    4. 在底部显示书籍的总价格；
    5. 用方法统一显示价格￥；
    6. 当所有的书籍移除完毕时，显示：购物车为空~。

    2. 效果图：

     3. 开发过程

            3.1 在界面上以表格的形式，显示一些书籍的数据；

    1. <body>
    2.   <div id="app"></div>
    3.   <template id="shopping">
    4.     <table>
    5.       <thead>
    6.         <th>序号</th>
    7.         <th>书籍名称</th>
    8.         <th>出版日期</th>
    9.         <th>价格</th>
    10.         <th>购买数量</th>
    11.         <th>操作</th>
    12.       </thead>
    13.       <tbody>
    14.         <tr v-for="(item,index) in books">
    15.           <td>{{index+1}}</td>
    16.           <td>{{item.name}}</td>
    17.           <td>{{item.date}}</td>
    18.           <td>{{item.price}}</td>
    19.           <td>
    20.             <button>-</button>
    21.             <span class="count">{{item.count}}</span>
    22.             <button>+</button>
    23.           </td>
    24.           <td>
    25.             <button>移除</button>
    26.           </td>
    27.         </tr>
    28.       </tbody>
    29.     </table>
    30.     <h2>总价：</h2>
    31.   </template>
    32.  
    33.   <script src="../js/vue.js"></script>
    34.   <script src="./index.js"></script>
    35. </body>
    1. Vue.createApp({
    2.   template: '#shopping',
    3.   data: function () {
    4.     return {
    5.       books: [
    6.         {
    7.           id: 1,
    8.           name: '《算法导论》',
    9.           date: '2006-9',
    10.           price: 85.00,
    11.           count: 1
    12.         },
    13.         {
    14.           id: 2,
    15.           name: '《UNIX编程艺术》',
    16.           date: '2006-2',
    17.           price: 59.00,
    18.           count: 1
    19.         },
    20.         {
    21.           id: 3,
    22.           name: '《编程珠玑》',
    23.           date: '2008-10',
    24.           price: 39.00,
    25.           count: 1
    26.         },
    27.         {
    28.           id: 4,
    29.           name: '《代码大全》',
    30.           date: '2006-3',
    31.           price: 128.00,
    32.           count: 1
    33.         },
    34.       ]
    35.  
    36.     }
    37.   },
    38.   computed: {
    39.  
    40.   },
    41.   methods: {
    42.   }
    43. }).mount("#app");
    1. table {
    2.   border: 1px solid #e9e9e9;
    3.   border-collapse: collapse;
    4.   border-spacing: 0;
    5.   margin-left: 50%;
    6.   transform: translateX(-50%);
    7. }
    8.  
    9. th,td{
    10.   padding: 8px 16px;
    11.   border: 1px solid #e9e9e9;
    12.   text-align: left;
    13. }
    14.  
    15. th{
    16.   background-color: #f7f7f7;
    17.   color: 5c6b77;
    18.   font-weight: 600;
    19. }
    20.  
    21. .count{
    22.   margin: 0px 5px;
    23. }
    24. h2{
    25.   text-align: center;
    26. }

            3.2  点击+或者-可以增加或减少书籍数量（如果为1，那么不能继续-）；

    1.  <td>
    2.             <button :disabled="item.count<2" @click="sub(index)">-</button>
    3.             <span class="count">{{item.count}}</span>
    4.             <button @click="add(index)">+</button>
    5.  </td>
    1. methods: {
    2.     sub(index) {
    3.       this.books[index].count--;
    4.     },
    5.     add(index) {
    6.       this.books[index].count++;
    7.     }
    8.   }

            3.3 点击移除按钮，可以将书籍移除；

     <button @click="remove(index)">移除</button>
    1.   methods: {
    2.     sub(index) {
    3.       this.books[index].count--;
    4.     },
    5.     add(index) {
    6.       this.books[index].count++;
    7.     },
    8.     remove(index) {
    9.       // 从index开始，切割1位
    10.       this.books.splice(index, 1)
    11.     }
    12.   }

            3.4 在底部显示书籍的总价格；

       <h2>总价：{{total}}</h2>
    1. computed: {
    2.     total() {
    3.       let sum = 0;
    4.       for (let book of this.books) {
    5.         sum += book.price * book.count;
    6.       }
    7.       return sum;
    8.     }
    9.   },

    1.         3.5 用方法统一显示价格￥；

      1.  methods: {
      2.     sub(index) {
      3.       this.books[index].count--;
      4.     },
      5.     add(index) {
      6.       this.books[index].count++;
      7.     },
      8.     remove(index) {
      9.       // 从index开始，切割1位
      10.       this.books.splice(index, 1)
      11.     },
      12.     formatPrice(price) {
      13.       return "￥" + price;
      14.     }
      15.   }
      1. //表格价格  
      2.  <td>{{formatPrice(item.price)}}</td>
      3.  
      4. //总价
      5.  <h2>总价：{{formatPrice(total)}}</h2>

      1.         3.6 当所有的书籍移除完毕时，显示：购物车为空~。

      1.  <template v-if="books.length>0">
      2.         <table>
      3.             <thead>
      4.               <th>序号</th>
      5.               <th>书籍名称</th>
      6.               <th>出版日期</th>
      7.               <th>价格</th>
      8.               <th>购买数量</th>
      9.               <th>操作</th>
      10.             </thead>
      11.             <tbody>
      12.               <tr v-for="(item,index) in books">
      13.                 <td>{{index+1}}</td>
      14.                 <td>{{item.name}}</td>
      15.                 <td>{{item.date}}</td>
      16.                 <td>{{formatPrice(item.price)}}</td>
      17.                 <td>
      18.                   <button :disabled="item.count<2" @click="sub(index)">-</button>
      19.                   <span class="count">{{item.count}}</span>
      20.                   <button @click="add(index)">+</button>
      21.                 </td>
      22.                 <td>
      23.                   <button @click="remove(index)">移除</button>
      24.                 </td>
      25.               </tr>
      26.             </tbody>
      27.           </table>
      28.           <h2>总价：{{formatPrice(total)}}</h2>
      29.     </template>
      30.     <template v-else>
      31.       <h2>购物车为空~</h2>
      32.     </template>

  • 相关阅读:
    【Android】界面是如何刷新的流程
    WebServer 解析HTTP 请求报文
    【Anoconda】安装 miniconda
    Codeforces暑期训练周报（7.14~7.20）
    Cpolar - 本地 WebUI 账号登录失败解决方案
    [PAT练级笔记] 68 Basic Level 1068 万绿丛中一点红
    【C语言刷题】Leetcode203——移除链表元素
    Ubuntu18.04搭建OpenGrok代码搜索工具
    通过sudo su root不需要输入root密码，只需要输入普通账号密码
    Hadoop（三）通过C#/python实现Hadoop MapReduce
  • 原文地址：https://blog.csdn.net/weixin_47227886/article/details/125516698