同时 处理 log 添加 类型 fun new compute
我们要写一个成绩表如下
数学 | 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);
- }
- }
这时,改变各科成绩就可以看到总分平均分对应的改动了。
vue.js 基础学习计算属性computed
来源: http://www.bubuko.com/infodetail-2290049.html