>>分享孙卫琴的Java技术专稿和著作 书籍支持  卫琴直播  品书摘要  在线测试  资源下载  联系我们
发表一个新主题 开启一个新投票 回复文章 您是本文章第 13498 个阅读者 刷新本主题
 * 贴子主题:  【Vue专题】Vue3的计算属性实用范例:实现购物车 回复文章 点赞(0)  收藏  
作者:sunweiqin    发表时间:2021-10-01 03:29:53     消息  查看  搜索  好友  邮件  复制  引用

本文参考《精通Vue.js:Web前端开发技术详解》,作者:孙卫琴,清华大学出版社出版

对于购物网站应用,需要在前端管理购物车。购物车中包含了所选购的商品的名字、数量、单价和小计(数量*单价)的信息,还包含了所有选购商品的总金额的信息。用户可以修改选购商品的数量,还可以删除选购的商品。

例程1的shoppingcart.html实现了购物车。cartItems数组变量表示用户选购的所有商品条目。在模板中通过v-for指令来遍历cartItems数组变量:
<tr v-for="(item,index) in cartItems">……</tr>

cartItems数组中的每个商品条目表示一个商品的具体购买信息,在购物车网页上会显示商品的具体购买信息:
(1)序号:{{index+1}}
(2)名称:{{item.name}}
(3)价格:{{ currency(item.price,2) }}
(4)数量:{{item.count}}
(5)小计:{{ currency(item.count*item.price,2) }}
以上currency()方法用于对金额数字进行格式化,保留两位小数,并且会在数字开头加上货币符号“¥”。
在遍历了cartItems数组中的所有商品后,还会在网页上显示所有选购商品的总金额:

总金额:{{ currency( total,2 ) }}  

以上total是计算属性,它的定义如下:

computed:{  
  total(){  //计算属性total表示总金额
    var sum=0;
    for(let i=0;i<this.cartItems.length;i++){
      sum+=parseFloat(this.cartItems[i].price)
                 *parseFloat(this.cartItems[i].count)
    }
    return sum
  }
}

以上total()函数遍历cartItems数组变量,计算所有选购商品的总金额。由于total()函数依赖cartItems数组变量,因此当用户在网页上修改了cartItems数组变量中商品的购买数量,或者删除了某个商品时,Vue框架就会调用total()函数,从而同步更新total计算属性的值。

例程1  shoppingcart.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>购物车</title>
    <script src="vue.js"></script>
  </head>

  <body>
    <div id="cart">
      <table border="1" width="600" style="margin: 0 auto;">
        <tr>
          <th>序号</th>
          <th>名称</th>
          <th>价格</th>
          <th>数量</th>
          <th>小计</th>
          <th>操作</th>
        </tr>
        <tr v-for="(item,index) in cartItems">
          <td>{{index+1}}</td>
          <td>{{item.name}}</td>
          <td>{{ currency(item.price,2) }}</td>
          <td>
            <!--  递增数量的按钮 -->
            <button v-on:click="item.count<=0?0:item.count-=1">
              -
            </button>

            <!--  设置数量的输入框 -->
            <input type="text" v-model.number="item.count"
               @keyup="item.count=item.count<=0?0:item.count"/>

            <!--  递减数量的按钮 -->    
            <button v-on:click="item.count+=1">+</button>
          </td>
          <td>{{ currency(item.count*item.price,2) }}</td>
          <td>
            <button @click="remove(index)">移除</button>
          </td>
        </tr>
        <tr>
          <td colspan="6" align="right">
             总金额:{{ currency( total,2 ) }}  
          </td>
        </tr>
      </table>
    </div>

    <script>
      const vm= Vue.createApp({
        data() {
          return {
            cartItems:[
              {id:10001,name:'足球',price:105.5,count:10},
              {id:10002,name:'跳绳',price:8.8,count:2},
              {id:10003,name:'呼啦圈',price:21.6,count:5},
            ]
          }
        },

        computed:{  
          total(){  //total计算属性表示总金额
            var sum=0;
            for(let i=0;i<this.cartItems.length;i++){
              sum+=parseFloat(this.cartItems[i].price)
                         *parseFloat(this.cartItems[i].count)
            }
            return sum
          }
        },

        methods:{
           remove(index){  //删除购物车的一个商品
             if(confirm('你确定要删除吗?')){
               this.cartItems.splice(index,1)
             }
           },

          //对金额进行格式化
          //参数v表示需要格式化的金额
          //参数n表示需要保留的小数位数
          currency(v,n){
            if(!v){  //如果v为空,就退出
              return ""
            }
            //增加货币符号"¥",并且保留n位小数,默认保留2位小数
           return "¥"+v.toFixed(n||2)
          }
        }
      }).mount('#cart')      

    </script>
  </body>
</html>

通过浏览器访问shoppingcart.html,会得到如图1所示的购物车网页。
点击在新窗口中浏览原图
CTRL+鼠标滚轮放大或缩小
图1  shoppingcart.html的网页

在shoppingcart.html的网页上增加或删除某个商品的数量,总金额以及小计会同步更新。如果移除某个商品,总金额也会同步更新。
shoppingcart.html同时运用了插值表达式、方法和计算属性。从这个范例也可以总结出这些方式的使用场合:
(1)对于简单的运算表达式,可以使用插值表达式,比如用{{ currency(item.count*item.price,2) }}表示商品的小计金额。
(2)如果运算逻辑复杂,并且运算过程不通用,可以使用计算属性,例如用total计算属性表示总金额。
(3)如果运算逻辑复杂,并且运算过程很通用,可以使用方法。例如用currency()方法对金额数字进行格式化。它的参数可以是商品单价、小计金额和总金额。
从语义上来区分,计算属性具有特定的属性特征,例如total计算属性表示总金额。而方法实现了通用的运算功能,例如currency()方法可以对所有金额数字进行通用的格式化。







程序猿的技术大观园:www.javathinker.net



[这个贴子最后由 sunweiqin 在 2022-08-30 11:40:29 重新编辑]
  Java面向对象编程-->Swing组件(下)
  JavaWeb开发-->Web运作原理(Ⅳ)
  JSP与Hibernate开发-->映射对象标识符
  Java网络编程-->用Spring整合CXF发布Web服务
  精通Spring-->计算属性和数据监听
  Vue3开发-->通过Vuex进行状态管理
  【Vue.js技术专题】Vue组件的数据监听
  【Vue.js技术专题】注册全局组件和局部组件
  【Vue.js技术专题】CSS中DOM元素的过渡模式
  【Vue.js技术专题】分割setup()函数
  【Spring Cloud Alibaba专题】GateWay的内置断言工厂
  【Spring Cloud Alibaba专题】SkyWalking整合MySQL
  【Spring Cloud Alibaba专题】Seata的架构
  【Spring Cloud Alibaba专题】GateWay与Nacos整合
  【Java基础编程专题】使用和创建JavaDoc文档
  【持久化专题】为什么JPA和Hibernate的持久化方法都抛出运行...
  【持久化专题】对象-关系的映射概念
  【持久化专题】EntityManager和Session的merge()方法详解
  IT技术书写作技巧分享:慎用概念和术语
  【Java基础编程专题】定时器Timer类的用法
  【Java基础编程专题】为什么说:继承关系最大的弱点就是打破...
  更多...
 IPIP: 已设置保密
楼主      
1页 0条记录 当前第1
发表一个新主题 开启一个新投票 回复文章


中文版权所有: JavaThinker技术网站 Copyright 2016-2026 沪ICP备16029593号-2
荟萃Java程序员智慧的结晶,分享交流Java前沿技术。  联系我们
如有技术文章涉及侵权,请与本站管理员联系。