VUE计算属性（可以写一个函数来讲计算值）
本案例为计算总分和平均分
计算属性：computed：{ } 和 data、methods 同级
HTML页面 ↓
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>VUE计算属性</title>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>语文</td>
// v-model.number 把双向绑定的model的值转换为数字型
<td><input type="text" v-model.number="yw"></td>
<td>{{yw}}</td>
</tr>
<tr>
<td>数学</td>
<td><input type="text" v-model.number="sx"></td>
<td>{{sx}}</td>
</tr>
<tr>
<td>英语</td>
<td><input type="text" v-model.number="yv"></td>
<td>{{yv}}</td>
</tr>
<tr>
<td>总分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{average}}</td>
</tr>
</tbody>
</table>
</div>
<script src="https://cdn.bootcss.com/vue/2.6.11/vue.js"></script>
<script src="index.js"></script>
</body>
</html>
JS页面 ↓
var app = new Vue({
el: '#app',
data: {
//分数
yw: 90,
sx: 80,
yv: 70
},
computed: {
//求和值
sum: function () {
return this.yw + this.sx + this.yv
},
//求平均分
average: function () {
return Math.round(this.sum / 3)
}
}
})
来源：CSDN
作者：吃瓜的阳大王
链接：https://blog.csdn.net/qq_44822110/article/details/104759390