Vue简单计算器

最新推荐文章于 2024-02-29 09:16:48 发布
最新推荐文章于 2024-02-29 09:16:48 发布
阅读量385 收藏
点赞数
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/s1090849674/article/details/129909907
版权

使用Vue编写简单计算器

完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			#app{
				height: 120px;
				width: 200px;
				margin: 0 auto;
				border: 2px solid red;
			}
		</style>
	</head>
	<body>
		<div id="app">
			<input type="text" name="" id="" value="" v-model.number="number1" />
			<select v-model="opt">
				<option >+</option>
				<option >-</option>
				<option >*</option>
				<option >/</option>
			</select>
			<input type="text" name="" id="" value=""  v-model.number="number2" /><br />
			<button @click="change">计算</button><br>
			结果:{{jg}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"",
				jg:0
			},
			methods:{
				change(){
					if(this.opt=="+"){
						this.jg=parseInt(this.number1)+parseInt(this.number2);
						
					}else if(this.opt=="-"){
						this.jg=parseInt(this.number1)-parseInt(this.number2);
						
					}else if(this.opt=="*"){
						this.jg=parseInt(this.number1)*parseInt(this.number2);
						
					}else{
						this.jg=parseInt(this.number1)/parseInt(this.number2);
						
					}
				}
			}
		})
	</script>
</html>

运行结果：

 

程序分析:

在Vue中，v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定，接下来，我们就用这个指令编写一个简单的计算器，代码如下

1.设定两个可供输入的数值，并设定双向绑定机制

<input type="text" name="" id="" value="" v-model.number="number1" />
<input type="text" name="" id="" value="" v-model.number="number2" />

ps：v-model.number是将绑定类型转化为number格式。

2.设定四个可选的标点符号

			<select v-model="opt">
				<option >+</option>
				<option >-</option>
				<option >*</option>
				<option >/</option>
			</select>

3.设定运行案件，开启启动程序，并绑定运算程序

<button @click="change">计算</button>
结果:{{jg}}

 运算方案：

方法1：

var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"",
				jg:0
			},
			methods:{
				change(){
					if(this.opt=="+"){
						this.jg=parseInt(this.number1)+parseInt(this.number2);
						
					}else if(this.opt=="-"){
						this.jg=parseInt(this.number1)-parseInt(this.number2);
						
					}else if(this.opt=="*"){
						this.jg=parseInt(this.number1)*parseInt(this.number2);
						
					}else{
						this.jg=parseInt(this.number1)/parseInt(this.number2);
						
					}
				}
			}
		})

输入框中的值都是字符串形式，需要使用 parseInt() 把字符串转换成数值型，也可以使用 vue 提供的 number 修饰符

方法2：

    var vm = new Vue({
      el: '#app',
      data: {
        number1: 0,
        number2: 0,
        jg: 0,
        opt: ''
      },
      methods: {
        calc() { // 计算器算数的方法  
          // 逻辑：
           switch (this.opt) {
            case '+':
              this.jg= parseInt(this.number1) + parseInt(this.number2)
              break;
            case '-':
              this.jg= parseInt(this.number1) - parseInt(this.number2)
              break;
            case '*':
              this.jg= parseInt(this.number1) * parseInt(this.number2)
              break;        
            case '/':
              this.jg= parseInt(this.number1) / parseInt(this.number2)
              break;
          } 
        }
      }
    });

两个方法效果无差别

其他运算方案：

使用watch监听器 或者 使用计算computed属性也可实现本方法

computed

computed:{
      result(){
         switch (this.opt) {
             case '+':
               return Number(this.n1) + Number(this.n2);
               break;
             case '-':
               return Number(this.n1) - Number(this.n2);
               break;
             case '*':
               return Number(this.n1) * Number(this.n2);
               break;
             case '/':
               return Number(this.n1) / Number(this.n2);
               break;
          }
      }
}

watch

methods:{
                    watch1(){
                        switch (this.opt) {
                            case '+':
                                this.result = Number(this.n1) + Number(this.n2);
                                break;
                            case '-':
                                this.result = Number(this.n1) - Number(this.n2);
                                break;
                            case '*':
                                this.result = Number(this.n1) * Number(this.n2);
                                break;
                            case '/':
                                this.result = Number(this.n1) / Number(this.n2);
                                break;
                        }
                    }
                },
                watch:{
                    n1:function(){
                        this.watch1()
                    },
                    n2:function(){
                        this.watch1()
                    },
                    opt:function(){
                        this.watch1()
                    }
                },
                created:{
                    this.watch1()
                }

好哥哥H
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue简易计算器
浪丶荡
04-08 8374
&lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;meta name="viewport" content="width=device-width,initial-scale=1.0"&gt;
一个基于vue的简易计算器
12-29
一个基于vue的简易计算器
使用Vue实现简单计算器
10-15
主要为大家详细介绍了使用Vue实现简单计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue简易计算器
weixin_48780364的博客
11-06 119
Vue简易计算器
【知识分享】vue制作一个页面计算器
各类程序设计成品、文档、学习资料
02-29 1320
vue制作一个页面计算器
Vue实现简单计算器
qq_36842789的博客
02-10 2599
效果
使用vue实现简单计算器
weixin_53273727的博客
03-24 1785
使用vue实现简单计算器 这个简单的例子意在了解vue中的v-for、v-model内置指令的使用 以下是效果图 （我将其命名为“廉价计算器”）（QAQ） html代码块 <div id="app"> <input type="number" v-model.number="sum_1" placeholder="请输入数值"/> <select v-model="symbol"> <option v-for="(item,key) in list">
Vue实现简易计算器
10-15
主要为大家详细介绍了用Vue制作的简易计算器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
Vue实现简单计算器案例
10-15
主要为大家详细介绍了Vue实现简单计算器案例，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
vue实现简易计算器
自由&不束缚的博客
05-30 448
效果图 代码 <!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title></ti
【Vue实现简单的计算器】
weixin_64313784的博客
04-02 2270
vue使用三种方法实现一个简单的计算器
Vue基础--简易的计算器
AsaZyf的博客
01-23 412
&lt;!DOCTYPE html&gt; &lt;html&gt; &lt;head&gt; &lt;meta charset="UTF-8"&gt; &lt;title&gt;&lt;/title&gt; &lt;script type="text/javascript" src="js/vue.js" &gt;&am
vue一个简单的计算器
qq_36371276的博客
07-07 754
&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;meta charset="utf-8" /&gt; &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt; &lt;title&gt;Page Title&lt;/
使用Vue编写简单计算器
aManWithDreams的博客
10-25 8261
使用Vue编写简单计算器 在Vue中，v-model 指令，可以实现表单元素和 Model 中数据的双向数据绑定，接下来，我们就用这个指令编写一个简单的计算器，代码如下 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title...
vue计算器插件安装
最新发布
03-29
Vue计算器插件的安装可以通过以下几个步骤完成： 1. 首先，确保你已经创建了一个Vue项目。如果还没有创建，可以使用Vue CLI来创建一个新的项目。 2. 打开终端，进入到你的Vue项目的根目录。 3. 使用npm或者yarn来安装计算器插件。你可以在npm或者yarn的官方网站上搜索计算器插件的名称，找到对应的包。 4. 在终端中运行以下命令来安装插件： ``` npm install 插件名称 ``` 或者 ``` yarn add 插件名称 ``` 5. 安装完成后，在你的Vue项目中找到`main.js`文件，这是项目的入口文件。 6. 在`main.js`文件中，使用`import`语句引入计算器插件： ```javascript import 插件名称 from '插件名称' ``` 7. 在Vue实例中，使用`Vue.use()`方法来注册插件： ```javascript Vue.use(插件名称) ``` 8. 现在，你可以在你的Vue组件中使用计算器插件了。根据插件的文档或示例代码，使用相应的组件或指令来实现计算器功能。 希望以上步骤对你有帮助！如果还有其他问题，请随时提问。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值