使用Vue完成加减乘除运算

最新推荐文章于 2023-12-27 10:03:09 发布
最新推荐文章于 2023-12-27 10:03:09 发布
阅读量35 收藏
点赞数
文章标签： javascript 前端 html
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/zhu0205/article/details/129911732
版权

工具： HBuilder X 

js插件：vue.js

教程：

首先在工具内引入vue.js

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

然后在body里面创建一个div并设置id，我这里给id命名为"app"

<div id="app">
<div>

在id命名为"app"的div内使用input标签和select标签来设置运算框

<div id="app">
	        <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}}
</div>

接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div

<script>
	  const vm = new Vue({
	  el: "#app",
	  data: {
             }
</script>

然后为每个input标签和select标签设置对应的data属性

data: {
	    num1:0,
	    num2:0,
	    sign:"+",
	    num3:0,
	    num4:0,
	    sign1:"+",
	    res1:"",
	    num5:0,
	    num6:0,
	    sign2:"+",
	    res2:""
	 }
<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}}

然后用 methods方法 computed方法 watch(侦听器)方法 做出3种不同的加减乘除运算

<script>
	        const vm = new Vue({
	            el: "#app",
	            data: {
	                num1:0,
	                num2:0,
	                sign:"+",
	                num3:0,
	                num4:0,
	                sign1:"+",
	                res1:"",
	                num5:0,
	                num6:0,
	                sign2:"+",
	                res2:""
	            },
	            methods:{
	                change(){
	                    if(this.sign2 === "+") {
	                        this.res2 = this.num5 + this.num6;
	                    } else if(this.sign2 === "-") {
	                        this.res2 = this.num5 - this.num6;
	                    } else if(this.sign2 === "*") {
	                        this.res2 = this.num5 * this.num6;
	                    } else if(this.sign2 === "/"){
	                        this.res2 = this.num5 / this.num6;
	                    }
	                }
	            },
	            computed:{
	                res(){
	                    if(this.sign === "+") {
	                        return this.num1 + this.num2;
	                    } else if(this.sign === "-") {
	                        return this.num1 - this.num2;
	                    } else if(this.sign === "*") {
	                        return this.num1 * this.num2;
	                    } else if(this.sign === "/"){
	                        return this.num1 / this.num2;
	                    }
	                }
	            },
	            watch:{
	                num3(val){
	                    if(this.sign1 === "+") {
	                        this.res1 = val + this.num4;
	                    } else if(this.sign1 === "-") {
	                        this.res1 = val - this.num4;
	                    } else if(this.sign1 === "*") {
	                        this.res1 = val * this.num4;
	                    } else if(this.sign1 === "/"){
	                        this.res1 = val / this.num4;
	                    }
	                },
	                num4(val){
	                    if(this.sign1 === "+") {
	                        this.res1 = this.num3 + val;
	                    } else if(this.sign1 === "-") {
	                        this.res1 = this.num3 - val;
	                    } else if(this.sign1 === "*") {
	                        this.res1 = this.num3 * val;
	                    } else if(this.sign1 === "/"){
	                        this.res1 = this.num3 / val;
	                    }
	                },
	                sign1(val){
	                    if(val === "+") {
	                        this.res1 = this.num3 + this.num4;
	                    } else if(val === "-") {
	                        this.res1 = this.num3 - this.num4;
	                    } else if(val === "*") {
	                        this.res1 = this.num3 * this.num4;
	                    } else if(val === "/"){
	                        this.res1 = this.num3 / this.num4;
	                    }
	                }
	            }
	        })
</script>

把写的3种方法分别绑定对应的input标签和select标签最后运行

源码：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<script src="js/vue.js"></script>
	</head>
	<body>
	    <div id="app">
	        <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}}
	    </div>
	    <script>
	        const vm = new Vue({
	            el: "#app",
	            data: {
	                num1:0,
	                num2:0,
	                sign:"+",
	                num3:0,
	                num4:0,
	                sign1:"+",
	                res1:"",
	                num5:0,
	                num6:0,
	                sign2:"+",
	                res2:""
	            },
	            methods:{
	                change(){
	                    if(this.sign2 === "+") {
	                        this.res2 = this.num5 + this.num6;
	                    } else if(this.sign2 === "-") {
	                        this.res2 = this.num5 - this.num6;
	                    } else if(this.sign2 === "*") {
	                        this.res2 = this.num5 * this.num6;
	                    } else if(this.sign2 === "/"){
	                        this.res2 = this.num5 / this.num6;
	                    }
	                }
	            },
	            computed:{
	                res(){
	                    if(this.sign === "+") {
	                        return this.num1 + this.num2;
	                    } else if(this.sign === "-") {
	                        return this.num1 - this.num2;
	                    } else if(this.sign === "*") {
	                        return this.num1 * this.num2;
	                    } else if(this.sign === "/"){
	                        return this.num1 / this.num2;
	                    }
	                }
	            },
	            watch:{
	                num3(val){
	                    if(this.sign1 === "+") {
	                        this.res1 = val + this.num4;
	                    } else if(this.sign1 === "-") {
	                        this.res1 = val - this.num4;
	                    } else if(this.sign1 === "*") {
	                        this.res1 = val * this.num4;
	                    } else if(this.sign1 === "/"){
	                        this.res1 = val / this.num4;
	                    }
	                },
	                num4(val){
	                    if(this.sign1 === "+") {
	                        this.res1 = this.num3 + val;
	                    } else if(this.sign1 === "-") {
	                        this.res1 = this.num3 - val;
	                    } else if(this.sign1 === "*") {
	                        this.res1 = this.num3 * val;
	                    } else if(this.sign1 === "/"){
	                        this.res1 = this.num3 / val;
	                    }
	                },
	                sign1(val){
	                    if(val === "+") {
	                        this.res1 = this.num3 + this.num4;
	                    } else if(val === "-") {
	                        this.res1 = this.num3 - this.num4;
	                    } else if(val === "*") {
	                        this.res1 = this.num3 * this.num4;
	                    } else if(val === "/"){
	                        this.res1 = this.num3 / this.num4;
	                    }
	                }
	            }
	        })
	    </script>
	</body>
 
</html>

效果展示：

 

zhu0205
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
轻松运用Vue实现加，减，乘，除
m0_52960319的博客
12-10 1万+
引用vue.js <script src="./js/vue.js"></script> html部分构造页面 <div id="app"> <input type="text" v-model="num"> <input type="text" v-model="num1"> <select v-model="opt"> <option value="+"
vue + 计算器 实现 加减乘除
04-18
在本项目中，我们主要探讨如何使用Vue.js框架来实现一个基本的计算器功能，包括加、减、乘、除四种运算。Vue.js是一款轻量级的前端JavaScript框架，以其组件化开发模式、响应式数据绑定和易用性而受到开发者们的广泛...
vue做加减乘除.html
02-26
vue做加减乘除.html
vue+html实现加减乘除
weixin_43448207的博客
04-02 5150
! 在这里插入图片描述 如上图所示，实现一个简简单单的加减乘除的运算效果，输入两个数字之后，只要选定运算符就可以自动计算出最终结果。具体代码如下： 1、此案例主要是练习如何使用vue，第一步是vue三部曲 2、完整的加减乘除代码： Title ...
用Vue的三种方法实现加减乘除运算
m0_74911203的博客
04-02 4850
接下来我们在id为"app"的div下面或者body的下面创建一个script，定义一个Vue方法并且绑定id为"app"的div。然后用 methods方法 computed方法 watch(侦听器)方法 做出3种不同的加减乘除运算。然后在body里面创建一个div并设置id，我这里给id命名为"app"然后在body里面创建一个div并设置id，我这里给id命名为"app"在body里面创建一个div并设置id，我这里给id命名为"app"在id命名为"app"的div内使用input标签和。
Vue的五种方法实现加减乘除运算
一步一个脚印，踏实努力，向着目标前进
08-22 4722
这些方法都可以实现加减乘除运算，具体使用哪种方法取决于您的需求和项目的架构。
BigDecimal加减乘除计算
04-02
BigDecimal 类在 Java 中被设计用来处理高精度的浮点数运算，主要应用于财务、金融等领域，因为这些场景中对精度要求非常高。BigDecimal 提供了加法（add()）、减法（subtract()）、乘法（multiply()）和除法...
Vue.js实现的计算器功能完整示例
10-18
主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下
vue.js实现简单的计算器功能
12-28
效果如图所示：是一个十分简单的计算器，包含了加减乘除，不是用原生js写的，而是用vue.js写的 html： <!DOCTYPE html> <html> <head> <meta charset=UTF-8> <title></title>...
vue+elmentui+ueditor +数学公式 编辑器
09-07
把数学公式引进ueditor的工具栏上面，是编辑器可以输入数学公式
Vuex案例实现加减功能
niesiyuan000的博客
10-25 3107
1.在项目中安装vuex(不会创建项目的可以查看我的文章:Vue项目步骤)    npm install vuex --save-dev2.在components文件夹内   建立vuex.vue   在src文件夹内   建立store.js3.打开main.js  修改其中数据,把vuex.vue引入进来  因为我们在这里用不到路由,所以把import router from './route...
Vue或JS加减乘除遇到精度异常问题
最新发布
hyx153183740的博客
12-27 1145
上面我们发现0.1和0.2转化为二进制之后，变成了一个无限循环的数字，这在现实生活中，无限循环我们可以理解，但计算机是不允许无限循环的，对于无限循环的小数，计算机会进行舍入处理。进行双精度浮点数的小数部分最多支持 52 位，所以两者相加之后得到这么一串 0.0100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 1100 ，因浮点数小数位的限制而截断的二进制数字，这时候，我们再把它转换为十进制，就成了0.30000000000000004。
用Vue完成加减乘除运算
weixin_73849867的博客
04-02 1181
第四步：在id为”app“的div下面创建一个script，定义一个Vue方法且绑定id为”app“的div并为每个input标签和select标签设置对应的data属性。第三步：在id为”app“的div中使用input和select标签设置运算框。第五步：用methods、computed、watch方法做出三种加减乘除运算。最后，把三种方法绑定其对应的input和select标签后运行。第二步：在body中创建div并设置其id为“app”第一步：在工具内引入vue,js。js插件：vue.js。
Vue JS 的加减乘除法精确计算问题
bamboolm的博客
09-28 1817
vue js 加减乘除精确计算
前端：JS精确得到（加减乘除）的结果
weixin_41036393的博客
11-10 1646
//加法函数，用来得到精确的加法结果 //说明：javascript的加法结果会有误差，在两个浮点数相加的时候会比较明显。这个函数返回较为精确的加法结果。 //调用：Add(arg1,arg2) //返回值：arg1加上arg2的精确结果 function Add(arg1, arg2) { arg1 = parseFloat(arg1); arg2 = parseFloat(arg2); var r1, r2, m; try { r1 = arg1.t...
vue 浮点型乘除法精确计算
热门推荐
攻防人生3722的博客
03-06 1万+
在js里直接使用乘法*得到的结果是不精确的，错误的。例如：0.0056*100=0.559999 很明显这个结果是错误的。 那么如何计算加减乘除呢？在vue 里. 乘法计算，使用的话也很简单 &lt;p&gt; 【月息】{{NumberMul(0.0058,100)}}% &lt;...
Vue JS 的乘法精确计算问题，出现很多位小数的问题与原因
KLW75
09-14 5752
出现问题的原因 计算机把小数转换成二级制，会出现无限循环的情况。再把无限循环的二级制转化成十进制的时候，变成了一个无限循环的数字。在处理双精度浮点数的小数部分最多支持 52 位，所以转换成十进制之后，就出现了很多位小数的存在。 解决办法 Vue.prototype.NumberMul = function(arg1, arg2) { var m = 0; var s1 = arg1.toString(); var s2 = arg2.toString(); try
前端js加减乘除vue
10-17
而在Vue中，可以通过数据绑定和计算属性来实现加减乘除运算。例如： ```html <p>{{ a }} + {{ b }} = {{ sum }} <p>{{ a }} - {{ b }} = {{ difference }} <p>{{ a }} * {{ b }} = {{ product }} <p>{{ a }}...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值