Vue.js 基础学习计算属性computed

Posted 2020-10-05 胡卓

我们要写一个成绩表如下

数学	90
物理	80
英语	70

 

<div id="app">
<table border="1">
<tr>
<td>数学</td>
<td>{{ math }}</td>
</tr>
<tr>
<td>物理</td>
<td>{{ physics }}</td>
</tr>
<tr>
<td>英语</td>
<td>{{ english }}</td>
</tr>
</table>
</div>

var app = new Vue({
        el : ‘#app‘,
        data : {
            math : 90,
            physics : 80,
            english : 70,
        }
    });

接下来我们要添加总分和平均分，

<tr>
                <td>总分</td>
                <td>{{math + physics + english}}</td>
            </tr>
            <tr>
                <td>平均分</td>
                <td>{{ Math.round((math + physics + english)/3) }}</td>
            </tr>

这时我们在td中加的东西很多，这样很不好，这时Vue提供了一个计算属性computed

为了方便观察我们同时将tr中的内容换成input来观察动态变化

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

var app = new Vue({
        el : ‘#app‘,
        data : {
            math : 90,
            physics : 80,
            english : 70,
        },
        computed : {
            sum : function(){
                return this.math + this.physics + this.english;
            },
            average : function() {
                return Math.round(this.sum/3);
            }
        }
    });

在app中加入computed 这时我们就可以动态的观察各科分数改变总分和平均分对应改变，但是由于input中输入内容会被自动转换成字符串类型，所以我们应该保证它是number类型，我们可以使用v-model的number修饰符，也可以在数据上进行处理，v-model上加修饰符就不说了，在computed中的sum对应的方法中给每个数据加一个parseFloat转换为number，

computed : {
            sum : function(){
                return parseFloat(this.math) + parseFloat(this.physics) + parseFloat(this.english);
            },
            average : function() {
                return Math.round(this.sum/3);
            }
        }

这时，改变各科成绩就可以看到总分平均分对应的改动了。