vue2.0简单计算器

最新推荐文章于 2024-04-18 21:58:44 发布

BvemiL

最新推荐文章于 2024-04-18 21:58:44 发布

阅读量142

点赞数

文章标签： javascript 前端 vue.js

本文链接：https://blog.csdn.net/m0_74084957/article/details/129099692

版权

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Document</title>
	<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>

<body>
	<div id="app">
		<h2>计算器</h2>
		<div>
			数值1：<input type="text" v-model.number="num1">
		</div>
		<div>
			数值2：<input type="text" v-model.number="num2">
		</div>
		<h4>{{sum}}</h4>
		<button @click="totalSum">计算和</button>
	</div>
	<script>
		let app = new Vue({
			el: "#app",
			data: {
				num1: 0,
				num2: 0,
				sum: 0
			},
			methods: {
				totalSum() {
					this.sum = this.num1 + this.num2
				}
			}
		})
	</script>
</body>

</html>

用到的小伙伴给点个赞吧