Vue练习3，用vue计算实时总和和平均值

Junju_

已于 2023-01-26 14:26:40 修改

阅读量2.1k

点赞数

分类专栏： vue练习题文章标签： vue.js javascript 前端

于 2022-10-12 08:58:05 首次发布

本文链接：https://blog.csdn.net/m0_58451019/article/details/127275577

版权

vue练习题专栏收录该内容

9 篇文章 0 订阅

订阅专栏

在这里插入图片描述

<!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>