用Vue的三种方法实现加减乘除运算

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

js插件：vue.js

教程：

首先在工具内引入vue.js

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

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

<body>
	    <div id="app">

在id命名为"app"的div内使用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>
	        结果是:{
  {num1}}{
  {sign}}{
  {num2}}={
  {res}}
 <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>
	        结果是:{
  {num3}}{
  {sign1}}{
  {num4}}={
  {res1}}
 <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>
	        结果是:{
  {num5}}{
  {sign2}}{
  {num6}}={
  {res2}}

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

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

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


                

        

        

    




        

            

                    
                      最低0.47元/天 解锁文章
                        
                    
            

        

    

      

        

            

              
                
                  hu15137376135
                
              
            

            

                关注
              
            

        

        

          
    
            
  • 
              
                
                
                
                
                      0
                
              
              
    点赞
    
            
    • 
            
  • 
              
                
                
                
              
              
    踩
    
            
    • 
            
  • 
              
                
                
                
                
                    0
                
              
              
    
                
    
                  
                    收藏
                  
                
    
              
    
              
    
                
    
                  觉得还不错?
                  
                    一键收藏
                  
                 
                
    
              
    
            
    • 
          
  • 
            
    
              
              
            
    
              
              
              
                  1
              
            
            
    评论
    
          
    • 
          
  • 
          
    • 
          
  • 
            
              
            
              
    
            
              
                
            
    
          
    • 
        

      

      










                



	

		

			

				
					
前端Vue自定义数字输入框 带加减按钮的数字输入框组件

				
			

			

				

					chenchuang0128的博客
				

				

					06-23
					
					3052
					
				

			

		

		

			
				
### 使用方法```使用方法-- title: 标题  isSetMax: 是否设置最大值  maxNum: 最大值-->

			
		

	



                

              
                



	

		

			

				
					
Vue学习:求和-使用vuex

				
			

			

				

					weixin_47295886的博客
				

				

					03-08
					
					1030
					
				

			

		

		

			
				
将sum交给vuex，然后count可以读sum可以写sum。对数据的操作，在dispath中（操作类型，值）actions里面的commit可以不用写。在store中的index.js中。将：count里面的sum去掉。

			
		

	



                


  
              

                


	

		

			

				
					
前端Vue自定义带加减按钮的数字输入框组件的设计与实现

					
最新发布

				
			

			

				

					chenchuang0128的博客
				

				

					05-31
					
					676
					
				

			

		

		

			
				
通过自定义带加减按钮的数字输入框组件的实践，我们深入了解了Vue组件化开发的过程和技巧。未来，随着前端技术的不断发展，组件化开发将会更加成熟和完善，为前端开发带来更多的便利和可能性。组件，开发者可以更加高效地构建具有数字输入框功能的前端界面，减少了重复代码的编写，提高了代码的复用性和可维护性。然而，组件化开发也带来了一些挑战，如如何设计合理的组件拆分策略、如何处理组件间的交互和通信等。组件化开发允许开发者将复杂的前端应用拆分成多个独立的、可复用的组件。模板：组件的模板定义了组件的结构和布局。

			
		

	





	

		

			

				
					
VUE实现添加多个动态输入框并获取值

				
			

			

				

					$狴犴^的博客
				

				

					05-04
					
					3786
					
				

			

		

		

			
				
VUE实现添加多个动态输入框并获取值HTMLCSS 完成样式的修改JS 代码片
实现思想: 运用数组创建多个数组对象变量, 然后存储在对应的数组里, 在需要提交的时候从数组中用下标取把属于同一列的数据取出来
HTML
      <div class="add-box">
        <p>岗位要求：</p>
        <p>评论：</p>
        <p>权重：</p>
      </div>

			
		

	



		

			
		



	

		

			

				
					
js如何返回输入两个数值的乘积_vue中两个input框输入值，自动计算总和到另一个Input框，怎么实现...

				
			

			

				

					weixin_39854288的博客
				

				

					12-21
					
					2455
					
				

			

		

		

			
				
computed:{sum(){return parseFloat(this.form.add1) + parseFloat(this.form.add2)}}v-model = 'sum'发送数据的时候把sum加上去r1:max="5">:label="item.name":key="item.id"name="type"@change="fun(index)">v-if="item...

			
		

	





	

		

			

				
					
同一个表单中，如何可以让其中一个输入框的值自动计算等于其他输入框值之和？

				
			

			

				

					ni15534789894的博客
				

				

					07-02
					
					1674
					
				

			

		

		

			
				
实际场景：

需要用到vue中computed计算属性
首先在data中声明三个变量分别代表输入框中的这几个数据

1、【
		这是data中声明的变量
        totalPopulation: undefined, // 总人口
        placementShift: '', // 水深小于等于0.5m及非淹没区就地安置人口
        placementMax: '', // 水深大于0.5m就地安置人口
        placementSmall: ''// 水深大于0.5m转移

			
		

	





	

		

			

				
					
vue结合element-ui实现（按钮控制）动态增加减少input框功能。

				
			

			

				

					weixin_48373171的博客
				

				

					04-20
					
					3844
					
				

			

		

		

			
				
vue结合element-ui实现页面元素的动态增加删除

			
		

	





	

		

			

				
					
vue + 计算器 实现 加减乘除

				
			

			

				

					04-18
				

			

		

		

			
				
在本项目中，我们主要探讨如何使用Vue.js框架来实现一个基本的计算器功能，包括加、减、乘、除四种运算。Vue.js是一款轻量级的前端JavaScript框架，以其组件化开发模式、响应式数据绑定和易用性而受到开发者们的广泛...

			
		

	





	

		

			

				
					
vue做加减乘除.html

				
			

			

				

					02-26
				

			

		

		

			
				
vue做加减乘除.html

			
		

	





	

		

			

				
					
vue.js实现简单的计算器功能

				
			

			

				

					12-28
				

			

		

		

			
				
效果如图所示：是一个十分简单的计算器，包含了加减乘除，不是用原生js写的，而是用vue.js写的  html：  <!DOCTYPE html> <html>  <head>  <meta charset=UTF-8>  <title></title>...

			
		

	





	

		

			

				
					
Vue.js实现的计算器功能完整示例

				
			

			

				

					10-18
				

			

		

		

			
				
主要介绍了Vue.js实现的计算器功能,结合完整实例形式分析了vue.js响应鼠标事件实现基本的数值运算相关操作技巧,可实现四则运算及乘方、开方等功能,需要的朋友可以参考下

			
		

	





	

		

			

				
					
vue实现计算器功能

				
			

			

				

					12-28
				

			

		

		

			
				
本文实例为大家分享了vue实现计算器功能的具体代码，供大家参考，具体内容如下  <!DOCTYPE html> <html lang=en> <head>  <meta charset=UTF-8>  <title>计算器</title>  [removed...

			
		

	





	

		

			

				
					
vuex的基本使用8步骤——等同于购物车里面的数量增减：

				
			

			

				

					jolinoy的博客
				

				

					03-11
					
					463
					
				

			

		

		

			
				
vuex的基本使用8步骤——等同于购物车里面的数量增减：

首先通过vue创建项目，并且添加vue-router和vuex两个插件：

项目目录如下图所示：



此文章所涉及的三个组件代码将会展示在下面。

此文章经过小编亲测，只为分享知识点，供大家参考学习。

vuex的基本使用8步骤——等同于购物车里面的数量增减：
1.在index



目录

vuex的基本使用8步骤——等同于购物车里面的数量增减：
1.在index.js里面设置count。
2.在About.vue里面设置count的计算属性。

			
		

	





	

		

			

				
					
vue快速入门(五) 之 简单的计数器

				
			

			

				

					weixin_44415928的博客
				

				

					03-16
					
					240
					
				

			

		

		

			
				
一个超级简单的计数器设置,如下

<body>
    <div id="app">
        <span @click='sub'>-</span>
        <span v-text="num"></span>
        <span @click="add">+</span>
  ...

			
		

	





	

		

			

				
					
（十）实现购物车中的对商品的数量选择操作

				
			

			

				

					感恩、奋进、自信
				

				

					05-04
					
					8228
					
				

			

		

		

			
				
实现购物车中的对商品的数量选择操作，如图1所示，当一开始的时候，界面最右侧只有一个“+”按钮；当点击右侧任意一个“+”按钮的时候，点击的食品的相应地方会出现“-”按钮，并且出现添加的数量，如图2所示；当在点击其他食品的“+”按钮的时候，也会出现点击的食品的相应地方会出现“-”按钮，并且出现添加的数量，同时底部购物车相应的地方也会做出变化，如 图3所示。 图1图2图3下面我们就详细的讲解上述联动的效...

			
		

	





	

		

			

				
					
js处理多种类型的数据进行合并，相同类型的数据相加

				
			

			

				

					铁锤妹妹的博客
				

				

					07-05
					
					3654
					
				

			

		

		

			
				
根据类型，合并接口返回的数据，相同类型的数据相加即可。

			
		

	





	

		

			

				
					
轻松运用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 从后端拿到的数字进行相加

				
			

			

				

					唯心所现，唯识所变
				

				

					12-03
					
					3451
					
				

			

		

		

			
				
情形：后端传来属性值，数据类型为string。然后我需要把属性值转化为数字再相加
let _this = this
equipmentRes.data.forEach(function (elem, index) {
        let str = elem.value - 0
        _this.all.equipment += str
      })




			
		

	





	

		

			

				
					
前端js加减乘除vue

				
			

			

				

					10-17
				

			

		

		

			
				
好的，针对你的问题，我可以给你提供一些思路。

首先，前端的加减乘除运算可以通过JavaScript来实现。例如：

```javascript
let a = 10;
let b = 5;

// 加法
let c = a + b;
console.log(c); // 输出 15

// 减法
let d = a - b;
console.log(d); // 输出 5

// 乘法
let e = a * b;
console.log(e); // 输出 50

// 除法
let f = a / b;
console.log(f); // 输出 2
```

而在Vue中，可以通过数据绑定和计算属性来实现加减乘除运算。例如：

```html
<template>
 <div>
    <p>{{ a }} + {{ b }} = {{ sum }}</p>
    <p>{{ a }} - {{ b }} = {{ difference }}</p>
    <p>{{ a }} * {{ b }} = {{ product }}</p>
    <p>{{ a }} / {{ b }} = {{ quotient }}</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      a: 10,
      b: 5,
    };
  },
  computed: {
    sum() {
      return this.a + this.b;
    },
    difference() {
      return this.a - this.b;
    },
    product() {
      return this.a * this.b;
    },
    quotient() {
      return this.a / this.b;
    },
  },
};
</script>
```

以上代码中，我们通过Vue的数据绑定将a和b的值渲染到模板中，并通过计算属性sum、difference、product和quotient来计算加减乘除的结果，并将结果渲染到模板中。



			
		

	



              



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

  

      
    
          
  • 
              
    
                  
                  
              
    
              
    非常没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    没帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    一般
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    有帮助
    
          
    • 
          
  • 
              
    
                  
                  
              
    
              
    非常有帮助
    
          
    • 
      

      

      

          
          提交
      

      

  




          




        



    





    



      

      

        
      

      





	

		
评论 1

	

	
	




  

    

      添加红包
      
    

    

      

        
        

          
          
        

        
请填写红包祝福语或标题

      

      

        
        

          
          个
        

        
红包个数最小为10个

      

      

        
        

          
          元
        

        
红包金额最低5元

      

      

        
        

          当前余额3.43元
          前往充值 >
        

      

      

        

          需支付：10.00元
        

        
        
      

    

  





  

    
    
  

  

    
    
  








  

    

      

        

          

            
            
成就一亿技术人!

          

          

        

        

          

          

            领取后你会自动成为博主和红包主的粉丝
            规则
          

        

      

      

        

          

            
              
            
            

              
hope_wisdom
 发出的红包
            

          

        

        

          

          

          

        

      

    

    

  



      
      

      
实付元

      
使用余额支付

      

        

          

            
            点击重新获取
          

        

        
扫码支付

      

      

        
          
            
          
          
        
      

      

        
        钱包余额
          0
          

            
            

              

                
抵扣说明：

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

              

            

          

      

      余额充值