使用vue及其插件完成加减乘除运算

最新推荐文章于 2025-03-18 17:30:12 发布

少喝可乐.158

最新推荐文章于 2025-03-18 17:30:12 发布

阅读量689

点赞数

文章标签： vue.js javascript 前端

本文链接：https://blog.youkuaiyun.com/weixin_68402956/article/details/129911001

版权

本文介绍如何在Vue.js应用中利用组件、v-model和计算属性完成动态的加减乘除运算。通过引入vue.js插件，创建input和select元素，结合v-model双向绑定数据，实现用户输入数值和选择运算符后实时显示计算结果。同时，展示了methods、computed和watch三种不同方式来处理运算逻辑。

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

一.工具：HBuilder

二.代码操作：

1.首先将vue.js插件引入

<head>
       <meta charset="utf-8" />
       <title></title>
       <script type="text/javascript" src="js/vue.js"></script>

   </head>

2.创建一个id为app的div容器来盛一些我们所需要的标签

<div id="app">

</div>

3. 在id为app的容器中加入我们需要的input标签“输入框”和select标签

<input type="text" placeholder="输入第一个数" v-model.number="num1">
<select v-model="sign">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="输入第二个数" v-model.number="num2"> <br>
结果是:{ {res}} <br>
<input type="text" placeholder="输入第一个数" v-model.number="num3">
<select v-model="sign1">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="输入第二个数" v-model.number="num4"> <br>
结果是:{ {res1}} <br>
<input type="text" placeholder="输入第一个数" v-model.number="num5" @change="change">
<select v-model="sign2" @change="change">
<option>+</option>
<option>-</option>
<option>*</option>
<option>/</option>
</select>
<input type="text" placeholder="输入第二个数" v-model.number="num6" @change="change"> <br>
结果是:{ {res2}}