1. html 页面
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<div id="app">
<table border="1">
<thead>
<th>学科</th>
<th>分数</th>
</thead>
<tbody>
<tr>
<td>数学</td>
<td><input v-model.number="math"></td>
</tr>
<tr>
<td>物理</td>
<td><input v-model.number="physics"></td>
</tr>
<tr>
<td>英语</td>
<td><input v-model.number="english"></td>
</tr>
<tr>
<td>总分</td>
<td>{{sum}}</td>
</tr>
<tr>
<td>平均分</td>
<td>{{avg}}</td>
</tr>
</tbody>
</table>
</div>
<script src="../lib/vue.js"></script>
<script src="js/01.js"></script>
</body>
</html>
2. js 内容
var app = new Vue({
el: '#app' , //作用在id为app 的组件
data: { //定义数据
math: 79,
physics: 98,
english: 88,
},
computed: { //计算属性
sum: function () {
return this.math + this.physics + this.english;
},
avg:function () {
return Math.round(this.sum / 3);
}
}
});
3. 效果图
欢迎来到这里！
我们正在构建一个小众社区，大家在这里相互信任，以平等 • 自由 • 奔放的价值观进行分享交流。最终，希望大家能够找到与自己志同道合的伙伴，共同成长。
注册 关于