vue简单的金额计算

一只蛋.

已于 2022-10-14 17:25:18 修改

阅读量2.1k

点赞数 6

文章标签： vue.js 前端 javascript

于 2021-10-30 10:01:48 首次发布

本文链接：https://blog.csdn.net/qq_53966155/article/details/121046949

版权

本文介绍了如何使用Vue.js创建一个简单的金额计算应用，用户可以输入单价和件数，实时计算总金额。代码展示了如何使用v-model和methods进行交互，并演示了如何将输入转换为数字类型并更新显示结果。

摘要由CSDN通过智能技术生成

1、效果图

2、功能说明：输入单价和件数点击其他地方输出总金额

3、代码（vue.js的引入地址目录记得改~~）

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>金额计算</title>
		<!-- 引入vue.js -->
		<script src="./vue.js"></script>
		<style type="text/css">
			#app{
				width: 300px;
				height: 200px;
				margin: auto;
				text-align: center;
				padding: 5px 15px;
				background-color: #e6e7ff;
			}
			h1{
				text-align: center;
			}
			input{
				margin-bottom: 5px;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<h1>金额计算</h1>
			<!-- number转换为数字 -->
			<!-- @change 当内容改变时执行函数 -->
			单价：<input type="text" v-model.number="n1" @change="calc()">元<br/>
			件数：<input type="text" v-model.number="n2" @change="calc()">件<br/>
			运费：<span>10</span>元<br>
			总金额：<span>{{sum}}</span>元
		</div>
		<script type="text/javascript">
			new Vue({
				el:"#app",
				data:{
					n1:0,//单价
					n2:0,//件数
					sum:0,//总金额
				},
				methods:{
					calc(){//计算并赋值给sum
						this.sum = this.n1*this.n2+10;
					},
				},
			})
		</script>
	</body>
</html>