Vue:在vue中实现简单的计算效果

最新推荐文章于 2026-01-23 22:50:02 发布

原创最新推荐文章于 2026-01-23 22:50:02 发布 · 691 阅读

6 ·

本内容遵循CC 4.0 BY-SA版权协议

标签

#vue.js #前端 #javascript

收录于

新人入门同时被 2 个专栏收录

8 篇文章

订阅专栏

vue

3 篇文章

订阅专栏

本文介绍如何使用Vue.js中的计算属性来实现简易计算器功能。通过v-model和v-bind:value指令完成输入和输出的双向绑定，实现分数求和及平均分计算。

vue中的computed 计算

注意事项
1. 需要注意变量刚创建默认是字符串类型，需要手动改为整数类型用parseInt(变量名)来把字符串转化成数字
2. 前三个输入框用v-model来绑定，后两个显示结果的要用v-bind:value来绑定进行双向绑定
效果展示：

代码实现

<div id="chang3">
		<!--用vue来实现简单的计算机效果-->
		<p>用vue来实现简单的计算机效果</p>
			语文:
			<input type="number"  v-model.number="a2"  /><br />
			数学:
			<input type="number"  v-model.number="b2" /><br />
			英语:
			<input type="number"  v-model.number="c2" /><br />
			总分:
			<input type="number"   name="" id="" :value="sum" /><br />
			平均分:
			<input type="number"   name="" id="" :value="sum/3" /><br />
			
		</div>
		<script>
			var vm=new Vue({
				el:'#chang3',
				data:{
					a2:0,
					b2:0,
					c2:0,
					
				},
				computed:{
					sum:function(){
						return this.a2+this.b2+this.c2;
					}
				}
				
			})
			
			
		</script>