<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<link rel="stylesheet" href="css/bootstrap.min.css">
<script src="js/jquery-3.6.0.js"></script>
<script src="js/bootstrap.bundle.min.js"></script>
<script src="js/vue.js"></script>
<script>
window.onload = function(){
new Vue({
el:"#app",
data:{
num1:80,
num2:90,
num3:50,
},
computed:{
total:function(){
return this.num1+this.num2+this.num3
},
avg:function(){
return (this.num1+this.num2+this.num3)/3
}
}
})
}
</script>
<body>
<div id="app">
<table class="table">
<tr>
<td>成绩分析</td>
</tr>
<tr>
<td>BS成绩:</td>
<td><input type="number" v-model="num1"></td>
</tr>
<tr>
<td>HTML成绩:</td>
<td><input type="number" v-model="num2"></td>
</tr>
<tr>
<td>JS成绩:</td>
<td><input type="number" v-model="num3"></td>
</tr>
<tr>
<td>总和:{{total}}</td>
<td>平均分:{{avg}}</td>
</tr>
</table>
</div>
</body>
</html>
Vue练习3,用vue计算实时总和和平均值
于 2022-10-12 08:58:05 首次发布