VUE3三个数字类型的文本框，设置到第三个文本框中

Question

问题遇到的现象和发生背景

VUE3
三个数字类型的文本框，输入其中两个，自动求和，设置到第三个文本框中，怎么设置啊，原生JS没问题

原生的直接 设置个id然后getElementById setValue
vue3 咋实现啊,绩效乘以倍数，设置到价格中

Answer 1

望采纳！！！

你参考下面的示例：

<div id="vuetest">
    <table>
            <tr>
                <td>数学</td>
                <td><input type="text" v-model.number="math"></td>
            </tr>
            <tr>
                <td>物理</td>
                <td><input type="text" v-model.number="physics"></td>
            </tr>
            <tr>
                <td>英语</td>
                <td><input type="text" v-model.number="english"></td>
            <tr>
                <td>总分</td>
                <td>{{sum}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{average}}</td>
            </tr>
            </tr>
        </table>
    </div>    

vue.js代码

var vuetest = new Vue({
        el:'#vuetest',
        data:{
                math:'',
                physics:'',
                english:'',
                },
    computed :{
            sum:function () {
                return parseFloat(this.math)+this.physics+this.english;    
                    },
            average :function(){
                return Math.round(this.sum/3);
                    }    
            }
        });