用计算属性、表达式、方法、侦听器四种方法完成简易计算器

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

计算属性

在vue实例的对象computed中声明一个函数，这个函数的返回值return就是计算属性的属性值

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model.number="number1"  />
			<select v-model="opt" >
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<br />
			结果：{{change}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*",
				number3:"",
			},
			computed:{
				change(){
					if(this.opt == "+"){
						return this.number1+this.number2
					}
					if(this.opt == "-"){
						return this.number1-this.number2
					}
					if(this.opt == "*"){
						return this.number1*this.number2
					}
					if(this.opt == "/"){
						return this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

效果图 

表达式

使用两个input定义文本输入框，type属性值为text，v-model来绑定数值

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="js/vue.js"></script>
</head>
<body>
    <div id="app">
        <input type="text" v-model.number="number1"  />
        <select v-model="opt" >
            <option>+</option>
            <option>-</option>
            <option>*</option>
            <option>/</option>
        </select>
        <input type="text" v-model.number="number2" />
        <button @click="m1" >计算</button>
        <br />
        <p v-show="xianshi1">{{number1}}+{{number2}}={{number1 + number2}}</p>
        <p v-show="xianshi2">{{number1}}-{{number2}}={{number1 - number2}}</p>
        <p v-show="xianshi3">{{number1}}*{{number2}}={{number1 * number2}}</p>
        <p v-show="xianshi4">{{number1}}/{{number2}}={{number1 / number2}}</p>
    </div>
</body>
<script type="text/javascript">
    var vm = new Vue({
        el:"#app",
        data:{
            number1:0,
            number2:0,
            opt:"+",
            xianshi1:false,
            xianshi2:false,
            xianshi3:false,
            xianshi4:false
        },
        methods: {
            m1() {
                if (this.opt === "+") {
                this.xianshi1 = true;
                this.xianshi2 = false;
                this.xianshi3 = false;
                this.xianshi4 = false;
                } else if (this.opt === "-") {
                this.xianshi1 = false;
                this.xianshi2 = true;
                this.xianshi3 = false;
                this.xianshi4 = false;
                } else if (this.opt === "*") {
                this.xianshi1 = false;
                this.xianshi2 = false;
                this.xianshi3 = true;
                this.xianshi4 = false;
                } else {
                this.xianshi1 = false;
                this.xianshi2 = false;
                this.xianshi3 = false;
                this.xianshi4 = true;
                }
            }
        }
    })
</script>
</html>

效果图 

方法

通过if来判断运算符，通过this来给number3赋值实现 

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model.number="number1"  />
			<select v-model="opt" >
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<button @click="change" >计算</button>
			<br />
			结果：<input type="text" v-model="number3" />
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"*",
				number3:"",
			},
			methods:{
				change(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

效果图 

侦听器

用watch监听data中的某一个数据变化

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<body>
		<div id="app">
			<input type="text" v-model.number="number1"/>
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<br />
			结果：{{number3}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				number3:0
			},
			watch:{
				number1(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				number2(){
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				},
				opt(){
					
					if(this.opt == "+"){
						this.number3 = this.number1+this.number2
					}
					if(this.opt == "-"){
						this.number3 = this.number1-this.number2
					}
					if(this.opt == "*"){
						this.number3 = this.number1*this.number2
					}
					if(this.opt == "/"){
						this.number3 = this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

效果图 

拆弹大专家
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
使用 Vue 方法，计算属性，监听器完成简易计算器
zhlong666的博客
04-02 177
Vue利用计算属性和侦听属性实现简易计算器
深入浅析Vue.js计算属性和侦听器
10-18
只有在计算属性无法满足需求时，才考虑使用侦听器。 总的来说，Vue.js的计算属性和侦听器提供了强大的工具，用于处理数据的逻辑和响应性。计算属性适合用于基于现有数据生成新值，且有缓存优化；而侦听属性则适用于...
计算属性和 方法和 侦听器
Allen的博客
10-08 571
一.计算属性： 我们在开发当中通常会遇到这种情况，需要返回的是两个变量的计算值 ，那我们就在computed属性中去定义计算的方法： eg： 我们现在有两个变量：fristname 和 lastname 。我们想要页面输出的是fullname 全名: 方法一：用computed计算属性来实现（内置缓存机制） 当更改age的时候， fullName 函数不执行； 只有当更改 firstname或 lastname fullname才会执行 data(){ return{ firstname:'hani'
【05】计算属性和侦听器
LuCh1Monster的博客
06-12 202
文章目录1. 计算属性1.1 基础例子1.2 计算属性缓存vs方法1.3 计算属性vs侦听属性1.4 计算属性的 setter2. 侦听器 1. 计算属性 模板内的表达式非常便利，但是设计它们的初衷是用于简单运算的。在模板中放入太多的逻辑会让模板过重且难以维护。例如: <div id="example"> {{ example.split('').reverse().join('') }} </div> 在这个地方，木那你们不再是简单的声明式逻辑。你必须看一段时间才能意识到
用表达式、计算属性、方法、侦听器四种方法完成简易计算器
D1823806469的博客
04-02 34
!!!
用计算属性、方法、侦听器、表达式四种方法完成简易计算器
m0_69858813的博客
04-01 56
11111111111
Vue利用普通方法或计算属性或侦听属性实现简易计算器
weixin_71219164的博客
04-02 140
将计算结果设定为一个computed计算属性，使用eval和模板字符串计算表达式的值。Vue 提供了一种更通用的方式来观察和响应 Vue 实例上的数据变动：侦听属性。//默认选择的运算符 可以设置为 '','+','-','*','/','%'每当侦听的属性发生改变时，vue会执行该属性对应的函数。//表达式不完整时跳过运算。三、使用watch侦听属性。//第一输入框中的数字。//第二输入框中的数字。
利用方法，侦听器，计算属性实现简易计算器案例
HEDZY的博客
04-03 88
普通方法直接在methods里定义一个名为jisuan()的计算方法，在页面中直接调用该方法即可。
Vue利用计算属性和侦听属性实现简易计算器
qq_34466755的博客
06-24 1838
<!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的方法、表达式、计算属性、监听器实现计算器功能
m0_74294675的博客
04-02 132
效果图 效果图 效果图 效果图 到这里就结束了，以上就是使用VUE的方法、表达式、计算属性、监听器实现计算器功能的例子，谢谢观看
详解vue 计算属性与方法跟侦听器区别(面试考点)
08-27
四、计算属性、方法和侦听器的区别 计算属性、方法和侦听器都是Vue框架中的一些机制，但是它们的使用场景和特点不同： * 计算属性：缓存，依赖项改变时重新计算，适用于计算复杂的逻辑。 * 方法：每次渲染时执行，...
Vue学习笔记之计算属性与侦听器用法
10-15
在Vue.js框架中，计算属性（Computed ...理解并合理使用计算属性和侦听器，能够帮助我们更好地构建动态、响应式的Vue应用，同时优化性能。在实际开发中，应根据需求选择合适的方法来处理数据变化，以达到最佳效果。
Vue2-02 computed计算属性、watch侦听器
01-18
在Vue.js框架中，`computed`属性和`watch`侦听器是两个非常重要的概念，它们主要用于处理数据的动态变化并实现复杂的逻辑。在Vue2中，这两个特性为开发者提供了强大的响应式数据处理能力。 首先，我们来深入理解`...
vue2前端阿里云oss服务端签名直传
weixin_74285634的博客
08-13 260
generatePresignedUrlApi是由后端提供的接口 来获取密钥。
【vue教程】五. Vue 的路由管理
前端探索者
08-13 1095
Vue Router 是 Vue 官方的路由管理器，用于构建单页面应用。它允许你通过 URL 来映射不同的组件，实现页面的动态加载和导航。路由守卫用于在路由跳转前后执行代码，可以用来检查用户认证状态、获取数据等。通过本篇文章，我们学习了 Vue Router 的基本概念、配置和使用，以及如何实现动态路由和嵌套路由。我们还探讨了路由守卫的概念，并提供了如何在 Vue 组件中使用它们的示例。这些知识点将帮助你构建一个功能完备的单页面应用。
【无标题】
最新发布
weixin_42348009的博客
08-14 165
静态方法返回一个由给定对象自身的可枚举的字符串键属性名组成的数组。
【Markdown】Markdown 中的语言简称
EleganceJiaBao的博客
08-12 989
以下是常见编程语言、脚本语言、标记语言等在 Markdown 中的语言简称以及相应的示例：
playwright链接本地浏览器，实现自动登录。
qq_38880880的博客
08-12 182
【代码】playwright链接本地浏览器，实现自动登录。
计算属性和侦听器区别、使用场景
07-28
下面是计算属性和侦听器的区别和使用场景： 1. 区别： - 计算属性是根据已有的响应式数据计算出一个新的值，并将其缓存起来，只有当依赖的响应式数据发生变化时，才会重新计算。计算属性适用于需要根据其他数据计算...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值