Vue · v-model实现简易计算器

_Mores

于 2020-03-12 15:53:58 发布

阅读量1k

点赞数

分类专栏：前端 · Vue 文章标签： vue

本文链接：https://blog.youkuaiyun.com/weixin_38604274/article/details/104820664

版权

本文介绍了如何使用Vue的v-model特性来构建一个简单的计算器。通过代码实现和运行效果展示，展示了v-model在实际应用中的功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

通过用v-model来实现简易计算器

【代码实现】

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>Vue学习</title>
		<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model="n1" />
			
			<select v-model="opt">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			
			<input type="text" v-model="n2" />
			
			<input type="button" value="=" @click="cal"/>
			
			<input type="text" v-model="result" />
		</div>

最低0.47元/天解锁文章