在做vue练习时遇到一个问题，就是提现时超过一定金额需要手续费，那如何让其显示实际到账金额呢？
先看一下静态布局：
当提现小于500时实际到账不需要手续费，但一旦超过500，超过部分需要40%手续费；这时就需要v-model属性配合监听使用了
const moneyes = ref(); //提现 2const shidao = ref(); //实际到账
首先声明两个常量，用于获取输入值与计算实际到账值；
然后使用watch监听：
watch(() => { if (moneyes.value <= 500) { shidao.value = moneyes.value; } else { shidao.value = (moneyes.value - 500) * 0.6 + 500; } });
当然为了提高用户体验要考虑到用户的实际体验，要考虑两个基本问题1）实际到账应为两位小数，2）不能输入负值，为此需要在添加一步判断与计算
watch(() => { if (moneyes.value <= 0) { moneyes.value = ""; } if (moneyes.value <= 500) { shidao.value = moneyes.value; fixed.value = parseFloat(shidao.value).toFixed(2); } else { shidao.value = (moneyes.value - 500) * 0.6 + 500; fixed.value = parseFloat(shidao.value).toFixed(2); } });
最后看看效果图
当提现小于500时
当提现大于500时
以上为个人见解不喜勿喷
