用vue做一个简单的加减乘除运算

最新推荐文章于 2024-08-02 17:54:22 发布

Y10109

最新推荐文章于 2024-08-02 17:54:22 发布

阅读量814

点赞数

文章标签： vue.js 前端

本文链接：https://blog.csdn.net/Y10109/article/details/129912593

版权

这篇博客介绍了如何使用Vue.js创建一个简单的加减乘除运算组件。通过组件化和template模板，实现输入数值的双向绑定，并展示了两种不同的运算处理方式：一种是通过点击事件触发运算，另一种是在组件内部直接进行比较和运算。文章提供了完整代码示例，并呈现了运行结果的样式。

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

1.组件的创建

<div id="app">
			
		</div>
	<script>
		var vm = new Vue(){
			el:'#app',
			data() {
				
			},
		}
	</script>

2.使用template组件

用template模板可以包裹元素，在循环过程中代码不易出错。input元素中的placeholder属性为提示信息，v-model为双向绑定，.number将输入值转为数值类型。option标签用于定义下拉列表中的一个选项。

 <template id="cpn1">
		<div class="input1">
		  <input type="text" placeholder="请输入第一个数字" v-model.number="number1">
		  <select v-model="opt">
			<option value="+">+</option>
			<option value="-">-</option>
			<option value="*">*</option>
			<option value="/">/</option>
		  </select>
		  <input type="text" placeholder="请输入第二个数字" v-model.n