vue计算属性

最新推荐文章于 2023-06-02 14:31:01 发布

陈百川

最新推荐文章于 2023-06-02 14:31:01 发布

阅读量75

点赞数

本文链接：https://blog.csdn.net/weixin_43889695/article/details/103016752

版权

在vue中，需要将计算逻辑以function(){}写在computed中

<table border="1">
                <thead>
                <th>学科</th>
                <th>分数</th>
                </thead>
                <tbody>
                <tr>
                    <td>数学</td>
                    <td><input type="text" v-model.number="math"></td>
                </tr>
                <tr>
                    <td>英语</td>
                    <td><input type="text" v-model.number="english"></td>
                </tr>
                <tr>
                    <td>物理</td>
                    <td><input type="text" v-model.number="physics"></td>
                </tr>
                <tr>
                    <td>总分</td>
                    <td>{{sum}}</td>
                </tr>
                <tr>
                    <td>平均分</td>
                    <td>{{avr}}</td>
                </tr>
                </tbody>
        </table>

JS部分

window.onload = function () {
    var app = new Vue({
        el:'#app',
        data:{
            math:80,
            english:80,
            physics:80,
        },
        computed:{						//这里写计算属性
            sum:function () {
                return this.math+this.english+this.physics;
            },
            avr:function () {
                return Math.round((this.math+this.english+this.physics)/3);
            }
        }
    });
};