vue简易计价器

一个商品计价器的HTML代码，可直接运行

  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>计价器</title>
  <!-- 引入 Element UI 样式文件 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 引入 Vue.js -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14/dist/vue.js"></script>
  <!-- 引入 Element UI JavaScript 文件 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>

  <div id="app">
    <el-container>
      <el-header>
        <h2 style="color: #409EFF; text-align: center;">计价器</h2>
      </el-header>
      <el-main>
        <el-form v-for="(item, index) in items" :key="index" :model="item" label-width="100px" style="margin-bottom: 20px;">
          <el-form-item label="商品名称">
            <el-input v-model="item.name"></el-input>
          </el-form-item>
          <el-form-item label="商品价格">
            <el-input type="number" v-model.number="item.price" @input="calculateSubtotal(index)"></el-input>
          </el-form-item>
          <el-form-item label="数量">
            <el-button @click="decrement(index)" type="text">-</el-button>
            <span style="margin: 0 10px;">{{ item.quantity }}</span>
            <el-button @click="increment(index)" type="text">+</el-button>
          </el-form-item>
          <el-form-item label="小计">
            <p>{{ calculateSubtotal(index) }}</p> <!-- 修改这里 -->
          </el-form-item>
        </el-form>
        <el-button @click="addItem" type="primary">添加商品</el-button>
        <p style="margin-top: 20px;">总价：<strong>{{ total }}</strong></p>
      </el-main>
    </el-container>
  </div>

  <script>
    new Vue({
      el: '#app',
      data: {
        items: [
          { name: '', price: 0, quantity: 1 }
        ]
      },
      computed: {
        total: function() {
            let total = 0;
            for (let item of this.items) {
              total += Math.round(item.price * 100) * item.quantity; // 将价格转换成整数进行计算
            }
            return (total / 100).toFixed(2); // 将结果转换回浮点数并保留两位小数
          }
      },
      methods: {
        addItem: function() {
          this.items.push({ name: '', price: 0, quantity: 1 });
        },
        increment: function(index) {
          this.items[index].quantity++;
        },
        decrement: function(index) {
          if (this.items[index].quantity > 1) {
            this.items[index].quantity--;
          }
        },
        calculateSubtotal: function(index) {
          return (this.items[index].price * this.items[index].quantity).toFixed(2); // 保留两位小数
        }
      }
    });
  </script>