Vue入门问题：如何实现input输入数值累加并实时展示

现有代码问题 #

• 方法名拼写错误：模板中绑定的点击事件是addMoney，但script中定义的方法名是addMomey，拼写不匹配导致点击不触发
• 回车事件绑定的addMessage方法未定义，无法触发回车提交逻辑
• 类型使用错误：myMoney是基础类型变量，不是数组，无法调用数组专属的push()方法
• 输入值类型问题：input设置的是text类型，绑定的myMoney值是字符串类型，直接相加会出现字符串拼接的问题
• 缺少累计变量的使用：data中定义的dollar没有被用到，刚好可以用来存储累加后的总金额

修正后完整代码 #

<template>
    <div class="portfel">
        <div class="profile">
            <div class="content__prof">
                <div class="ico__prof"><img src="" alt=""></div>
                <div class="buttom__prof">
                    <!-- 修改input类型为number限制数字输入，v-model加number修饰符自动转数字 -->
                    <input id="txtName" @keyup.enter="addMoney" v-model.number="myMoney" type="number">
                    <button @click="addMoney">Sum</button>
                </div>
                <div class="value__prof">
                    <div>$: {{dollar}}</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            myMoney: 0, // 存储当前输入的金额
            dollar: 0 // 存储累计总金额
        }
    },
    methods:{
        addMoney(){
            // 输入无效值时不执行累加
            if (!this.myMoney) return
            // 累加逻辑
            this.dollar += this.myMoney
            // 清空输入框方便下次输入
            this.myMoney = 0
        }
    }
}
</script>

核心修改说明 #

• 输入框调整为数字类型，配合v-model.number修饰符直接拿到数字类型的输入值，避免字符串拼接问题
• 统一事件绑定的方法名，确保点击按钮、回车都能触发累加逻辑
• 用dollar变量专门存储累计结果，每次累加完成后自动清空输入框，符合常规交互逻辑

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