vue使用计算属性，侦听器，方法完成计算器

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

一.代码详解

1.html部分

<div id="app">
        <input type="text" placeholder="请输入第一个数" v-model.number="number1">
        <select v-model="opt1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="number2"> <br />
        答案:{{result}} <br />
        <input type="text" placeholder="请输入第一个数" v-model.number="number3">
        <select v-model="opt2">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="number4"> <br />
        答案:{{result1}} <br />
        <input type="text" placeholder="请输入第一个数" v-model.number="number5" >
        <select v-model="opt3"  >
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="number6" >
		<button @click="change">结果</button> <br />
        答案:{{result2}}
    </div>

先使用一个div包括三个input-select-input结构的计算器。

注：placehoder是input中不输入内容时的提示文字，v-model.number可以使绑定的内容指定为数字。

2.script部分

a.计算属性

​
computed:{
                result(){
                    if(this.opt1 == "+") {
                        return this.number1 + this.number2;
                    } else if(this.opt1 == "-") {
                        return this.number1 - this.number2;
                    } else if(this.opt1 == "*") {
                        return this.number1 * this.number2;
                    } else if(this.opt1 == "/"){
                        return this.number1 / this.number2;
                    }
                }
            },

​

使用if-else判断当运算符为+，-，×，÷时不同的运算情况。

b.侦听器

watch:{
                number3(val){
                    if(this.opt2 == "+") {
                        this.result1 = val + this.number4;
                    } else if(this.opt2 == "-") {
                        this.result1 = val - this.number4;
                    } else if(this.opt2 == "*") {
                        this.result1 = val * this.number4;
                    } else if(this.opt2 == "/"){
                        this.result1 = val / this.number4;
                    }
                },
                number4(val){
                    if(this.opt2 == "+") {
                        this.result1 = this.number3 + val;
                    } else if(this.opt2 == "-") {
                        this.result1 = this.number3 - val;
                    } else if(this.opt2 == "*") {
                        this.result1 = this.number3 * val;
                    } else if(this.opt2 == "/"){
                        this.result1 = this.number3 / val;
                    }
                },
                sign1(val){
                    if(val == "+") {
                        this.result1 = this.number3 + this.number4;
                    } else if(val == "-") {
                        this.result1 = this.number3 - this.number4;
                    } else if(val == "*") {
                        this.result1 = this.number3 * this.number4;
                    } else if(val == "/"){
                        this.result1 = this.number3 / this.number4;
                    }
                } 
			},

使用number3，number4和sign1侦听当两个数字和运算符变化时的不同情况。

c.方法

methods:{
			    change(){
			        if(this.opt3 == "+") {
			            this.result2 = this.number5 + this.number6;
			        } else if(this.opt3 == "-") {
			            this.result2 = this.number5 - this.number6;
			        } else if(this.opt3 == "*") {
			            this.result2 = this.number5 * this.number6;
			        } else if(this.opt3 == "/"){
			            this.result2 = this.number5 / this.number6;
			        }
			    }
			},

使用change方法保存不同的运算符时的运算。

二.完整代码

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<script type="text/javascript" src="js/vue.js"></script>
	</head>
	<body>
    <div id="app">
        <input type="text" placeholder="请输入第一个数" v-model.number="number1">
        <select v-model="opt1">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="number2"> <br />
        答案:{{result}} <br />
        <input type="text" placeholder="请输入第一个数" v-model.number="number3">
        <select v-model="opt2">
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="number4"> <br />
        答案:{{result1}} <br />
        <input type="text" placeholder="请输入第一个数" v-model.number="number5" >
        <select v-model="opt3"  >
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" placeholder="请输入第二个数" v-model.number="number6" >
		<button @click="change">结果</button> <br />
        答案:{{result2}}
    </div>
</body>
<script>
        var vm = new Vue({
            el: "#app",
            data: {
                number1:"",
                number2:"",
                opt1:"+",
                number3:"",
                number4:"",
                opt2:"+",
                result1:"",
                number5:"",
                number6:"",
                opt3:"+",
                result2:""
            },
            computed:{
                result(){
                    if(this.opt1 == "+") {
                        return this.number1 + this.number2;
                    } else if(this.opt1 == "-") {
                        return this.number1 - this.number2;
                    } else if(this.opt1 == "*") {
                        return this.number1 * this.number2;
                    } else if(this.opt1 == "/"){
                        return this.number1 / this.number2;
                    }
                }
            },
            watch:{
                number3(val){
                    if(this.opt2 == "+") {
                        this.result1 = val + this.number4;
                    } else if(this.opt2 == "-") {
                        this.result1 = val - this.number4;
                    } else if(this.opt2 == "*") {
                        this.result1 = val * this.number4;
                    } else if(this.opt2 == "/"){
                        this.result1 = val / this.number4;
                    }
                },
                number4(val){
                    if(this.opt2 == "+") {
                        this.result1 = this.number3 + val;
                    } else if(this.opt2 == "-") {
                        this.result1 = this.number3 - val;
                    } else if(this.opt2 == "*") {
                        this.result1 = this.number3 * val;
                    } else if(this.opt2 == "/"){
                        this.result1 = this.number3 / val;
                    }
                },
                sign1(val){
                    if(val == "+") {
                        this.result1 = this.number3 + this.number4;
                    } else if(val == "-") {
                        this.result1 = this.number3 - this.number4;
                    } else if(val == "*") {
                        this.result1 = this.number3 * this.number4;
                    } else if(val == "/"){
                        this.result1 = this.number3 / this.number4;
                    }
                } 
			},
			methods:{
			    change(){
			        if(this.opt3 == "+") {
			            this.result2 = this.number5 + this.number6;
			        } else if(this.opt3 == "-") {
			            this.result2 = this.number5 - this.number6;
			        } else if(this.opt3 == "*") {
			            this.result2 = this.number5 * this.number6;
			        } else if(this.opt3 == "/"){
			            this.result2 = this.number5 / this.number6;
			        }
			    }
			},
        })
    </script>
</html>

无效昵称丶
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Vue 方法，计算属性，监听器完成简易计算器
zhlong666的博客
04-02 170
Vue利用计算属性和侦听属性实现简易计算器
Vue利用普通方法或计算属性或侦听属性实现简易计算器
weixin_71219164的博客
04-02 134
将计算结果设定为一个computed计算属性，使用eval和模板字符串计算表达式的值。Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。//默认选择的运算符 可以设置为 '','+','-','*','/','%'每当侦听的属性发生改变时，vue会执行该属性对应的函数。//表达式不完整时跳过运算。三、使用watch侦听属性。//第一输入框中的数字。//第二输入框中的数字。
Vue利用计算属性和侦听属性实现简易计算器
qq_34466755的博客
06-24 1829
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title></title> <script src="./js/vue.js" type="text/javascript" charset="utf-8"></script> <script src="js/vue-router.js" type="text/javascript
vue之计算属性和侦听器
ylb1213的博客
10-14 200
1、当模板内的表达式比较复杂的时候，可以使用vue的计算属性来简化模板内的表达式。 2、计算属性具有缓存的功能，即仅当计算属性关联的属性发生变化的时候，才会重新计算属性的值，函数却是每次渲染的时候，          都会重新计算 3、侦听器：当属性的值发生变更时，会触发属性对应的侦听器 4、当属性变化时需要执行异步操作或者开销大的动作时，建议使用侦听器，其余建议使用计算属性  ...
vue-计算属性与属性侦听器
TianMing_xe的博客
08-04 96
详情看代码~
VUE计算属性与侦听器，过滤器
小生不才的博客
11-01 198
1.计算属性computed 某些结果是基于之前数据实时计算出来的，我们可以利用计算属性 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>computed计算器和watch监听器&l
Vue计算属性与监听器
二哈喇子！
07-12 1153
计算属性配置项 computed、监听器配置项 watch
Vue计算属性和侦听属性
web_only_的博客
01-04 463
（一）计算属性 1. 计算属性使用Vue实例的computed选项实现 2. 计算属性的书写格式 computed:{ 计算属性:function(){ ... ... return 计算属性的计算公式 } } 3. 计算属性不能是出现在Vue实例data区中的变量 4. 计算属性的含义： 当计算属性的依赖变量发生变化时，计算属性会自动重新计算。 5. 计算属性的gette...
vue计算属性和侦听器_使用Vue和D3的教练补偿计算器
cuk5340的博客
07-27 77
vue计算属性和侦听器 madlab计算器 (madlab-calculator) Coach compensation calculator using Vue and d3. 使用Vue和d3的教练补偿计算器。 项目设置 (Project setup) npm install 编译和热重装以进行开发 (Compiles and hot-reloads for development) ...
深入浅析Vue.js计算属性和侦听器
10-18
只有在计算属性无法满足需求时，才考虑使用侦听器。 总的来说，Vue.js的计算属性和侦听器提供了强大的工具，用于处理数据的逻辑和响应性。计算属性适合用于基于现有数据生成新值，且有缓存优化；而侦听属性则适用于...
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
Vue框架中，计算属性、方法和侦听器是三个常见的概念，但它们都有其特点和适用场景，下面我们将详细介绍它们的区别和使用场景。 一、计算属性（Computed Properties） 计算属性是Vue框架中的一种特殊的属性，它...
Vue学习笔记之计算属性与侦听器用法
10-15
在Vue.js框架中，计算属性（Computed ...理解并合理使用计算属性和侦听器，能够帮助我们更好地构建动态、响应式的Vue应用，同时优化性能。在实际开发中，应根据需求选择合适的方法来处理数据变化，以达到最佳效果。
Vue computed计算属性的使用方法
08-29
Vue computed计算属性的使用方法 computed计算属性是Vue框架中的一种强大特性，它可以根据依赖关系自动计算并缓存结果，从而提高应用程序的性能。在本文中，我们将详细介绍Vue computed计算属性的使用方法，并与...
vue 切换主题色切换主题色切换主题色切换主题色切换主题色
口袋的天空的博客
07-09 1193
vue切换主题
【vueUse库Reactivity模块各函数简介及使用方法--下篇】
xiejunlan的博客
07-11 1393
vueUseReactivity函数构想中的refWithControl函数可能的实现方式总结2. syncRef构想中的syncRef函数可能的实现方式注意事项总结3.syncRefs构想中的syncRefs函数可能的实现方式注意事项总结假想的toReactive函数注意事项假设的toReactive函数实现结论5.toReftoRef函数介绍使用方法示例代码总结6.toRefstoRefs函数介绍使用方法示例代码总结7.toValue使用 Vue 3 自身的 API示例使用 vueUse 的类似功能。
vuejs v-for和v-if同时使用报变量未定义
最新发布
业余程序猿
07-14 160
vue3中v-if优先级高，v-if使用v-for循环体数据时数据还未加载，就报未定义了。vue2中v-for优先级高，同时使用v-if可以直接使用v-for的循环体数据。无论时vue2还是3，官方都不建议两者一起使用，建议通过template嵌套。vue3和vue2 v-if和v-for同时使用时渲染优先级变了。查了下官方文档才找到问题所在。风格指南 — Vue.js。
CSS特效：pointer-events: none；的一种特殊应用
q1003675852的博客
07-11 479
本文记录了pointer-events: none;的一种特殊应用，既能显示模糊渐变的同时还能保持元素可点击的效果。
vue vite+three在线编辑模型导入导出
regretTAT的博客
07-10 491
要实现一个类似于数字孪生的场景 可以在线、新增、删除模型 、以及编辑模型的颜色、长宽高 然后还要实现 编辑完后 保存为json数据 记录模型数据 既可以导入也可以导出
vue计算属性和侦听器的区别
07-10
Vue计算属性和侦听器是用于处理Vue实例数据变化的两种不同的方式。 计算属性是一种基于依赖关系自动更新的属性。它可以根据已有的数据计算出一个新的值，并且在依赖的数据发生变化时自动更新。计算属性可以像普通...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值