• 购物车案例的实现

    最终效果： 

    1.计算属性

    用于计算最终价格，对此计算使用计算属性最佳

    原理是遍历books中的每一个属性，价格*数量

    1.       computed:{
    2.         totalPrice()
    3.         {
    4.           let totalPrice=0
    5.           // 1.普通的for循环
    6.           // for (let i=0;i
    7.           // {
    8.           //   totalPrice+=this.books[i].count*this.books[i].price
    9.           // }
    10.           // return totalPrice
    11.  
    12.           // 2.1
    13.           // for(let i in this.books)
    14.           // {
    15.           //   totalPrice+=this.books[i].count*this.books[i].price
    16.           // }
    17.  
    18.           // 2.2
    19.           // for(let i in this.books)
    20.           // {
    21.           //   const book=this.books[i]
    22.           //   totalPrice+=book.count*book.price
    23.           // }
    24.  
    25.           //3.
    26.            for(let item of this.books)
    27.              {
    28.              totalPrice+=item.price*item.count
    29.              }
    30.         }
    31.       },

    2.过滤器

    使每个出现数字的地方自动加上小数点，以及￥

    一旦设置完毕，使用非常方便

    1.       filters: {
    2.         showPrice(price) {
    3.           return "¥" + price.toFixed(2)
    4.         }
    5.       }
    <h2>总价格：{{totalPrice|showPrice}}h2>

      

    3.v-bind

    按钮动态绑定disabled属性，当数量为1时不可再减少，此时禁用减号按钮

            <button @click="decrement(index)" v-bind:disabled="item.count<=1">-button>

    4.v-if/v-else

    当所有书都被移除时，显示购物车为空

    即只有书的种类不为空（length>=1）时渲染元素

    当为空是显示购物车为空

      <div v-if="books.length">
      <h2 v-else>购物车为空h2>

    5.v-on 

    当点击按钮时，书的数量变化

    当点击移除时，去掉书的这一行

            <button @click="increment(index)">+button>
          <td><button @click="removeHandler(index)">移除button>td>
    1.         decrement(index) {
    2.           // console.log("decrement",index)
    3.           this.books[index].count--
    4.         },
    5.  
    6.         // 实现移除功能:splice
    7.         removeHandler(index) {
    8.           this.books.splice(index, 1)
    9.         }

    源代码：

     index.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.   <meta charset="UTF-8">
    5.   <title>Titletitle>
    6.   <link rel="stylesheet" href="style.css">
    7. head>
    8. <body>
    9.  
    10. <div id="app">
    11.   <div v-if="books.length">
    12.   <table>
    14.     <thead>
    15.     <tr>
    16.       <th>th>
    17.       <th>书籍名称th>
    18.       <th>出版日期th>
    19.       <th>价格th>
    20.       <th>购买数量th>
    21.       <th>操作th>
    22.     tr>
    23.     thead>
    25.     <tbody>
    26.     <tr v-for="(item,index) in books">
    29.       <td>{{item.id}}td>
    30.       <td>{{item.name}}td>
    31.       <td>{{item.date}}td>
    35.       <td>{{item.price | showPrice}}td>
    36.       <td>
    38.         <button @click="decrement(index)" v-bind:disabled="item.count<=1">-button>
    39.         {{item.count}}
    40.         <button @click="increment(index)">+button>
    41.       td>
    42.       <td><button @click="removeHandler(index)">移除button>td>
    43.     tr>
    44.     tbody>
    45.   table>
    46. <h2>总价格：{{totalPrice|showPrice}}h2>
    47.   div>
    48.   <h2 v-else>购物车为空h2>
    49. div>
    50.  
    53. <script src="../js/vue.js">script>
    54. <script src="main.js">script>
    55.  
    56.  
    57. body>
    58. html>

    main.js 

    1. const app=new Vue(
    2.     {
    3.       el: "#app",
    4.       data: {
    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.             id: 3,
    21.             name: "编程珠玑",
    22.             date: "2008-10",
    23.             price: 39.00,
    24.             count: 1
    25.           }, {
    26.             id: 4,
    27.             name: "代码大全",
    28.             date: "2006-3",
    29.             price: 128.00,
    30.             count: 1
    31.           },
    32.         ],
    33.       },
    34.       methods: {
    35.         //   getFinalPrice(price)
    36.         //   {
    37.         //     return "￥"+price.toFixed(2)
    38.         //   }
    39.         //因为有多个按钮，必须根据下标判断具体是哪一个
    40.         increment(index) {
    41.           // console.log("increment",index)
    42.           this.books[index].count++
    43.         },
    44.         decrement(index) {
    45.           // console.log("decrement",index)
    46.           this.books[index].count--
    47.         },
    48.  
    49.         // 实现移除功能:splice
    50.         removeHandler(index) {
    51.           this.books.splice(index, 1)
    52.         }
    53.       },
    54.       computed:{
    55.         totalPrice()
    56.         {
    57.           let totalPrice=0
    58.           for (let i=0;i<this.books.length;i++)
    59.           {
    60.             totalPrice+=this.books[i].count*this.books[i].price
    61.           }
    62.           return totalPrice
    63.         }
    64.       },
    65.       filters: {
    66.         showPrice(price) {
    67.           return "¥" + price.toFixed(2)
    68.         }
    69.       }
    70.       }
    71.  
    72. )

     style.css

    1. table{
    2.   border: 1px solid #e9e9e9;
    3.   border-collapse: collapse;
    4.   border-spacing: 0;
    5. }
    6.  
    7. th,td{
    8.   padding: 8px 16px;
    9.   border: 1px solid #e9e9e9;
    10.   text-align: left;
    11. }
    12.  
    13. th{
    14.   background-color: #f7f7f7;
    15.   color: #5c6c77;
    16.   font-weight: 600;
    17. }

  • 相关阅读:
    【递归、搜索与回溯算法】第六节.98. 验证二叉搜索树和230. 二叉搜索树中第K小的元素
    Spark on Yarn With K8s
    python 调用adb shell
    洛谷2022SCP第一轮J组模拟题（LGR-2022-J1）部分题解
    Redis实战：保证数据不丢失，RDB&AOF持久化原理解析
    Java零基础入门-位运算符
    并查集_find()_连通块_食物链
    Java面试之数据库面试题
    YOLOv5算法改进（14）— 如何去更换主干网络（3）（包括代码+添加步骤+网络结构图）
    mysql各个版本修改root用户密码
  • 原文地址：https://blog.csdn.net/weixin_54327001/article/details/128008537