使用vue动态求和，单独拎出来求和

Question

使用vue动态求和，我是写死代码的，这样后期维护会很繁琐，所以想问问有没有什么好方法，把计算单独拎出来，又能随之值的修改，总之一起改变？

<tbody>
          <tr v-for="(item, index) in listData" :key="item.mobile" class="table-list">
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><span>{{ index+1 }}</span></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'">{{ item.userName }}</td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><span v-if="item.departments!=undefined">{{ item.departments.join() }}</span></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.baseSalaryStr " type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.performanceStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.postSalaryStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.manageEncourageStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.skillSalaryStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.senioritySalaryStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.externalEncourageStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.commissionStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'">
              <input :readonly="readonly" class="price-ipt" style="color:blue;" :value="(Number(item.baseSalaryStr)+ Number(item.performanceStr)+Number(item.postSalaryStr)+Number(item.manageEncourageStr)+Number(item.skillSalaryStr)+Number(item.senioritySalaryStr)+Number(item.externalEncourageStr)+Number(item.commissionStr))?(Number(item.baseSalaryStr)+ Number(item.performanceStr)+Number(item.postSalaryStr)+Number(item.manageEncourageStr)+Number(item.skillSalaryStr)+Number(item.senioritySalaryStr)+Number(item.externalEncourageStr)+Number(item.commissionStr)):'0.00'">
            </td>
            <td :class=" item.ifUpdate ? 'textCenter': 'update-tr'"><input v-model="item.socialSecurityStr" type="number" class="price-ipt" :disabled="item.ifUpdate" @keydown="handleInput"></td>
            <td :class="item.ifUpdate ? 'textCenter': 'update-tr'">
              <button v-if="item.ifUpdate" class="choose-btn" @click="updateInfo(index, item)">修改</button>
              <button v-if="!item.ifUpdate" class="choose-btn" :disabled="item.saveBtn" @click="saveRow(index, item)">保存</button>
              <button class="choose-btn" @click="cancelInfo(index, item)">取消</button>
            </td>
          </tr>
          <tr v-if="listData.length<=0">
            <td colspan="14" style="text-align: center;">-没有记录-</td>
          </tr>
        </tbody>

Answer 1

vue不是有computed

https://www.jb51.net/article/173689.htm