Vue.js火速上手第八章——vue的计算属性

最新推荐文章于 2023-08-05 22:06:31 发布

人保雷佳音

最新推荐文章于 2023-08-05 22:06:31 发布

阅读量364

点赞数

分类专栏： Vue.js 文章标签： vue.js

本文链接：https://blog.csdn.net/tangdaren2/article/details/106709402

版权

Vue.js 专栏收录该内容

21 篇文章 0 订阅

订阅专栏

一、需求分析

现要做三个单科成绩、总分、平均分的展示

            <table border="2">
				<thead>
				<th>科目</th>
				<th>分数</th>			
				</thead>
				<tbody>
				<tr>
					<td>数学</td>
					<td><input type="text" v-model="math" /></td>
				</tr>
				<tr>
					<td>语文</td>
					<td><input type="text" v-model="chinese" /></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>
				</tbody>
			</table>

var app=new Vue({
		el: '#app',
		data:{
			math: 88,
			chinese: 86,
			english: 86,
		},
		computed:{
			sum:function(){
				return this.math+this.chinese+this.english;
			},
			average:function(){
				return this.sum /3;
			},
		},
});

二、初始效果

三、优化四舍五入

			average:function(){
				return Math.round(this.sum /3);
			},

四、优化字符串乱码

如在前台修改数据，有可能出现以下乱码

这是由于字符串没有数字类型

有两种方式可以防止此现象

1、在前台加v-model.number

2、在js文件中转义parseFloat(this.math)

五、本章完整代码

index.html

<html >
	<head>
	    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
		<title>chapter18.7</title>
	</head>
	<body>		
		<div id="app">
			<table border="2">
				<thead>
				<th>科目</th>
				<th>分数</th>			
				</thead>
				<tbody>
				<tr>
					<td>数学</td>
					<td><input type="text" v-model.number="math" /></td>
				</tr>
				<tr>
					<td>语文</td>
					<td><input type="text" v-model.number="chinese" /></td>
				</tr>
				<tr>
					<td>英语</td>
					<td><input type="text" v-model.number="english" /></td>
				</tr>
				<tr>
					<td>总分</td>
					<td>{{sum}}</td>
				</tr>
				<tr>
					<td>平均分</td>
					<td>{{average}}</td>
				</tr>
				</tbody>
			</table>
		</div>
		<script src="lib/vue.js"></script>
		<script src="js/main.js"></script>
	</body>
</html>

main.js

var app=new Vue({
		el: '#app',
		data:{
			math: 88,
			chinese: 86,
			english: 86,
		},
		computed:{
			sum:function(){
				return this.math+this.chinese+this.english;
			},
			average:function(){
				return Math.round(this.sum /3);
			},
		},
});

人保雷佳音

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
Vue.js火速上手第八章——vue的计算属性

一、需求分析现要做三个单科成绩、总分、平均分的展示 <table border="2"> <thead> <th>科目</th> <th>分数</th> </thead> <tbody> <tr> <td>数学</td> <td><input type="
复制链接

扫一扫