Vue.js餐厅小费计算器开发求助：实现人均金额计算

完整修正代码 #

Script 部分

export default {
  data() {
    return {
      items: [
        {
          valor1: "", // 餐费金额
          valor2: "15", // 默认小费比例15%
          valor3: "1"  // 默认1人分摊
        }
      ]
    };
  },
  methods: {
    soma() {
      this.items.push({
        valor1: "",
        valor2: "15",
        valor3: "1"
      });
    },
    calculateTotal(item) {
      const billAmount = parseFloat(item.valor1) || 0;
      const tipPercentage = parseFloat(item.valor2) || 0;
      return (billAmount + billAmount * (tipPercentage / 100)).toFixed(2);
    },
    calculatePerPerson(item) {
      const total = parseFloat(this.calculateTotal(item));
      const peopleCount = parseInt(item.valor3) || 1;
      return (total / peopleCount).toFixed(2);
    }
  }
};

Template 部分

<template>
  <main>
    <h1>餐厅小费计算器</h1>
    <button @click="soma">添加新的计算条目</button>
    <ul>
      <li v-for="(item, index) in items" :key="index">
        <label>餐费金额？</label>
        <input type="number" v-model.number="item.valor1" min="0" step="0.01" />
        
        <label>服务满意度（对应小费比例）？</label>
        <select v-model="item.valor2">
          <option value="5">5%（极差）</option>
          <option value="10">10%（差）</option>
          <option value="15">15%（一般）</option>
          <option value="20">20%（好）</option>
          <option value="25">25%（很好）</option>
          <option value="30">30%（完美）</option>
        </select>
        
        <label>分摊人数？</label>
        <input type="number" v-model.number="item.valor3" min="1" />
        
        <h4>总金额: R$ {{ calculateTotal(item) }} | 人均应付: R$ {{ calculatePerPerson(item) }}</h4>
      </li>
    </ul>
  </main>
</template>

关键修改说明 #

• 补充data()初始化：给items数组添加默认条目，避免页面加载时无输入项；设置默认小费比例为15%、分摊人数为1，提升用户体验
• 数字类型绑定：输入框使用v-model.number，自动将输入值转为数字，省去手动类型转换的麻烦
• 计算逻辑实现：
  • calculateTotal：计算包含小费的总金额，处理空值/非数字输入（默认取0），结果保留两位小数保证金额格式正确
  • calculatePerPerson：基于总金额和分摊人数计算人均费用，处理人数为0的异常情况（默认按1人计算）
• 模板优化：
  • 添加添加新的计算条目按钮，触发原有的soma方法实现多组计算
  • 给v-for循环添加:key属性，符合Vue性能优化最佳实践
  • 给输入框设置min和step属性，限制输入范围（餐费不能为负，支持小数；人数至少1人）
  • 将提示文本和标题转为中文，匹配需求场景

内容的提问来源于stack exchange，提问作者JoaoGabrielPuhlMachado