vue 实现计算器功能

最新推荐文章于 2024-04-07 19:37:54 发布

邢帥兵_

最新推荐文章于 2024-04-07 19:37:54 发布

阅读量365

点赞数 1

分类专栏： html vue js 文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/m0_64875238/article/details/126981820

版权

js 同时被 3 个专栏收录

41 篇文章 28 订阅

订阅专栏

vue

20 篇文章 43 订阅

订阅专栏

html

14 篇文章 0 订阅

订阅专栏

效果图

注意！！！需要外引入 vue 文件！别忘咯

代码奉上：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		<div id="app">
			<h1>watch监听</h1>
			<input type="text" v-model="obj.pre">
			<select v-model="obj.type">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">×</option>
				<option value="/">÷</option>
			</select>
			<input type="text" v-model="obj.next">
			=
			{{obj.result}}
		</div>
	</body>
	<script src="./js/vue.js"></script>
	<script>
		new Vue({
			el: "#app",
			data() {
				return {
					obj: {
						pre: 1,
						next: 1,
						type: "+",
						result: 2
					}
				}
			},
			//  watch  数据监听
			watch: {
				"obj": {
					handler(nval, oval) {
						this.obj.result = eval(`(${this.obj.pre})${this.obj.type}(${this.obj.next})`);
					},
					deep: true,
				}
			}
		})
	</script>
</html>