• 小小购物车案例（V3）

    效果如下：

    可以添加和减少商品个数（最少个为1），在添加的时候总价格会随着改变，也可以点击按钮移除商品

    代码分为三个模块（html、js、css）

    html部分：

    1. <!DOCTYPE html>
    2. <html lang="en">
    3.  
    4. <head>
    5.     <meta charset="UTF-8">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>书籍购物车</title>
    8.     <link href="./index.css" rel="stylesheet" type="text/css">
    9. </head>
    10.  
    11. <body>
    12.     <div id="app"></div>
    13.  
    14.     <template id="my-app">
    15.         <template v-if="books.length > 0">
    16.             <table>
    17.                 <thead>
    18.                     <th>序号</th>
    19.                     <th>书集名称</th>
    20.                     <th>出版日期</th>
    21.                     <th>价格</th>
    22.                     <th>购买数量</th>
    23.                     <th>操作</th>
    24.                 </thead>
    25.                 <tbody>
    26.                     <tr v-for="(book,index) in books" :key="index">
    27.                         <td>{{index+1}}</td>
    28.                         <td>{{book.name}}</td>
    29.                         <td>{{book.publicationDate}}</td>
    30.                         <td>{{formatPrice(book.price)}}</td>
    31.                         <td>
    32.                             <button :disabled="book.count<=1" @click="decrement(index)">-</button>
    33.                             <span class="count">{{book.count}}</span>
    34.                             <button @click="increment(index)">+</button>
    35.                         </td>
    36.                         <td>
    37.                             <button @click="removeBook(index)">移除</button>
    38.                         </td>
    39.                     </tr>
    40.                 </tbody>
    41.  
    42.             </table>
    43.             <h2>总价格：{{formatPrice(totalPrice)}}</h2>
    44.         </template>
    45.         <template v-else>
    46.             <div class="empty">购物车为空</div>
    47.         </template>
    48.     </template>
    49.  
    50.     <script src="../js/vue3.js"></script>
    51.     <script src="./index.js"></script>
    52. </body>
    53.  
    54. </html>

    js部分：

    1. const App = {
    2.     template: '#my-app',
    3.     data() {
    4.         return {
    5.             books: [
    6.                 {
    7.                     id: 1,
    8.                     name: '乱世佳人',
    9.                     publicationDate: '2007-09-02',
    10.                     price: '42',
    11.                     count: 1,
    12.                 },
    13.                 {
    14.                     id: 2,
    15.                     name: '幸福来敲门',
    16.                     publicationDate: '2007-09-02',
    17.                     price: '54',
    18.                     count: 1,
    19.                 },
    20.                 {
    21.                     id: 3,
    22.                     name: '弱点',
    23.                     publicationDate: '2007-09-02',
    24.                     price: '65',
    25.                     count: 1,
    26.                 },
    27.                 {
    28.                     id: 4,
    29.                     name: '楚门的世界',
    30.                     publicationDate: '2007-09-02',
    31.                     price: '43',
    32.                     count: 1,
    33.                 }
    34.             ]
    35.  
    36.         }
    37.     },
    38.     computed: {
    39.         totalPrice() {
    40.             let finalPrice = 0;
    41.             for (let book of this.books) {
    42.                 finalPrice += book.count * book.price;
    43.             }
    44.             return finalPrice
    45.         }
    46.     },
    47.     methods: {
    48.         // 点击加
    49.         increment(index) {
    50.             this.books[index].count++;
    51.         },
    52.         // 点击减
    53.         decrement(index) {
    54.             this.books[index].count--;
    55.  
    56.         },
    57.         // 点击移除
    58.         removeBook(index) {
    59.             this.books.splice(index, 1)
    60.         },
    61.         // 在价格前面加上￥符号
    62.         formatPrice(price) {
    63.             return "¥" + price
    64.         }
    65.     },
    66. }
    67.  
    68. Vue.createApp(App).mount('#app')

    css部分：

    1. table{
    2.     border: 1px solid #e9e9e9;
    3.     border-collapse: collapse;
    4.     border-spacing: 0;
    5. }
    6. th,td{
    7.     padding: 8px 16px;
    8.     border: 1px solid #e9e9e9;
    9. }
    10. th{
    11.     background-color: #f7f7f7;
    12.     color: #5c6b77;
    13.     font-weight: 600;
    14. }
    15. .count{
    16.     margin: 0 5px;
    17. }
    18. .empty{
    19.     margin-left: 80px;
    20.     margin-top: 50px;
    21.     font-size: 30px;
    22. }

  • 相关阅读:
    数字孪生技术在物流领域的应用举例
    Ubuntu18.04安装Loam保姆级教程
    Linux环境下载安装Seata1.5
    安卓常见设计模式12------观察者模式（Kotlin版、Livedata、Flow）
    leetCode 15.三数之和 双指针解法
    SpringBoot+Vue项目大学校园防疫与服务系统的设计与实现
    华为云Astro的前世今生：用7年时间革新低代码开发观念
    第四章 文件管理 七、文件共享
    Cloak斗篷、AB轮询收款科技详解，FP独立站原来可以这样玩！
    CSS 简介
  • 原文地址：https://blog.csdn.net/weixin_45096939/article/details/133175547