当前位置：首页 > VUE

vue实现商品列表总价

2026-01-21 07:56:54VUE

实现商品列表总价计算

在Vue中实现商品列表总价计算，通常涉及数据绑定、计算属性和方法调用。以下是一种常见的实现方式：

数据准备

商品列表数据通常存储在组件的data或props中，每个商品对象应包含价格和数量属性：

data() {
  return {
    products: [
      { id: 1, name: '商品A', price: 100, quantity: 2 },
      { id: 2, name: '商品B', price: 200, quantity: 1 },
      { id: 3, name: '商品C', price: 50, quantity: 3 }
    ]
  }
}

计算总价

使用计算属性computed自动计算总价，这种方式具有缓存特性，只有当依赖数据变化时才会重新计算：

computed: {
  totalPrice() {
    return this.products.reduce((sum, product) => {
      return sum + (product.price * product.quantity)
    }, 0)
  }
}

模板展示

在模板中直接使用计算属性显示总价：

<div>
  <h3>商品列表</h3>
  <ul>
    <li v-for="product in products" :key="product.id">
      {{ product.name }} - 单价: {{ product.price }}元 
      - 数量: {{ product.quantity }}
    </li>
  </ul>
  <p>总价: {{ totalPrice }}元</p>
</div>

动态更新

当用户修改商品数量时，总价会自动更新。可以通过输入框绑定数量：

<li v-for="product in products" :key="product.id">
  {{ product.name }} - 单价: {{ product.price }}元 
  - 数量: <input v-model.number="product.quantity" type="number" min="1">
</li>

格式化显示

使用过滤器或方法格式化价格显示，如保留两位小数：

filters: {
  currency(value) {
    return '¥' + value.toFixed(2)
  }
}

模板中使用：

vue实现商品列表总价

<p>总价: {{ totalPrice | currency }}</p>

完整组件示例

<template>
  <div>
    <h3>商品列表</h3>
    <ul>
      <li v-for="product in products" :key="product.id">
        {{ product.name }} - 单价: {{ product.price | currency }} 
        - 数量: <input v-model.number="product.quantity" type="number" min="1">
      </li>
    </ul>
    <p>总价: {{ totalPrice | currency }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      products: [
        { id: 1, name: '商品A', price: 100, quantity: 2 },
        { id: 2, name: '商品B', price: 200, quantity: 1 },
        { id: 3, name: '商品C', price: 50, quantity: 3 }
      ]
    }
  },
  computed: {
    totalPrice() {
      return this.products.reduce((sum, product) => {
        return sum + (product.price * product.quantity)
      }, 0)
    }
  },
  filters: {
    currency(value) {
      return '¥' + value.toFixed(2)
    }
  }
}
</script>

这种方法利用了Vue的响应式特性，当任何商品的价格或数量发生变化时，总价会自动更新，无需手动触发计算。