vue计算的四种写法

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

1.用方法的方式写：两个input一个option用v-model实现双向绑定，oncilck点击触发showinfo方法，switch判断计算符号

<!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" 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="showInfo">计算</button>
			<h2>方法：{{val}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				number1: 0,
				number2: 0,
				val: "",
				opt: "+",
			},
			methods: {
				showInfo() {
					let value=0;
					switch (this.opt) {
						case '+':
							value = this.number1 + this.number2;
							break;
						case '-':
							value = this.number1 - this.number2;
							break;
						case '*':
							value = this.number1 * this.number2;
							break;
						case '/':
							value = this.number1 / this.number2;
							break;
					}
					this.val=this.number1+this.opt+this.number2+"="+value;
				}
				
			}
		})
	</script>
</html>

 2.用表达式的方式写：两个input一个option用v-model实现双向绑定，用v-if判断计算符号进行相对应的计算

<!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" v-model.number="number1" />
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
		<h2 v-if="opt=='+'">{{number1}}{{opt}}{{number2}}={{number1+number2}}</h2>
		<h2 v-if="opt=='-'">{{number1}}{{opt}}{{number2}}={{number1-number2}}</h2>
		<h2 v-if="opt=='*'">{{number1}}{{opt}}{{number2}}={{number1*number2}}</h2>
		<h2 v-if="opt=='/'">{{number1}}{{opt}}{{number2}}={{number1/number2}}</h2>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				number1: 0,
				number2: 0,
				opt: "+",
			}
		})
	</script>
</html>

3.用监听器的方法写：两个input一个option用v-model实现双向绑定，用watch监听每一个计算变量，当值发生改变时，用新改变的值进行相对应的计算。

<!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" v-model.number="number1" />
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<h2>{{val}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				number1: 0,
				number2: 0,
				opt: "+",
				val:"",
			},
			watch:{
				number1(xin){
					let value=0;
					switch (this.opt) {
						case '+':
							value = xin + this.number2;
							break;
						case '-':
							value = xin - this.number2;
							break;
						case '*':
							value = xin * this.number2;
							break;
						case '/':
							value = xin / this.number2;
							break;
					}
					this.val=xin+this.opt+this.number2+"="+value;
				},
				number2(xin){
					let value=0;
					switch (this.opt) {
						case '+':
							value = this.number1 + xin;
							break;
						case '-':
							value = this.number1 - xin;
							break;
						case '*':
							value = this.number1 * xin;
							break;
						case '/':
							value = this.number1 / xin;
							break;
					}
					this.val=this.number1+this.opt+xin+"="+value;
				},
				opt(xin){
					let value=0;
					switch (xin) {
						case '+':
							value = this.number1 + this.number2;
							break;
						case '-':
							value = this.number1 - this.number2;
							break;
						case '*':
							value = this.number1 * this.number2;
							break;
						case '/':
							value = this.number1 / this.number2;
							break;
					}
					this.val=this.number1+this.opt+this.number2+"="+value;
				}
			}
			
		})
	</script>
</html>

4.用计算属性的方式写：两个input一个option用v-model实现双向绑定，用computed定义一个计算属性number3，当number3里面变量的值发生改变时，number3会重新计算。

<!DOCTYPE html>
<!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" v-model.number="number1" />
			<select v-model="opt">
				<option>+</option>
				<option>-</option>
				<option>*</option>
				<option>/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<h2>{{number3}}</h2>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: "#app",
			data: {
				number1: 0,
				number2: 0,
				opt: "+",
			},
			computed: {
				number3(){
					let value = 0;
					switch (this.opt) {
						case '+':
							value = this.number1 + this.number2;
							break;
						case '-':
							value = this.number1 - this.number2;
							break;
						case '*':
							value = this.number1 * this.number2;
							break;
						case '/':
							value = this.number1 / this.number2;
							break;
					}
					return this.number1 + this.opt + this.number2 + "=" + value;
				}
			}
		})
	</script>
</html>

新青年楷模
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论
vue3-vite-ts:学习vue3的新属性的同时，尝试ts的写法
03-08
5. **Setup 函数**：每个Vue3组件都有一个setup()函数，它是组件生命周期的起点，可以在这里初始化状态、监听事件、注册计算属性等。它是Composition API的核心部分。 接下来，我们来看看TypeScript在Vue3中的应用...
layui使用vue的例子
06-13
在layui的表格中，你可以利用Vue的数据属性和计算属性来动态渲染数据，实现表格的实时更新。 其次，layui的layer弹窗组件可以与Vue结合，创建出交互式的对话框。在增删改查的操作中，layer常用于显示确认提示或者...
用VUE实现计算器四种方法
weixin_64688373的博客
04-02 4217
每当这些属性中的任何一个发生变化时，监视器函数将调用方法来重新计算结果，并更新数据属性中的值。函数中使用了一个switch语句，根据opt变量的不同值，分别执行加法、减法、乘法或除法，并将结果赋值给变量num3。2，计算属性根据选择的操作符将两个数字进行计算，并将结果返回给HTML中的输出元素。4.1，HTML代码不变，两个输入数值的输入框和输出元素的表单，一个基础的vue实例化。1，HTML代码定义了一个输入和输出元素，两个输入框，使用下拉框，选择运算符。三，使用方法（methods）实现简易的计算器。
vue---十分钟搞懂vue计算属性
qq_61950936的博客
08-16 3951
计算属性本质上就是一个 function 函数，它可以实时监听 data 中数据的变化，并 return 一个计算后的新值，供组件渲染 DOM 时使用。✨个人笔记博客✨星月前端博客✨原创不易，还希望各位大佬支持一下✏️评论，你的意见是我进步的财富！......
Vue-计算属性(computed)简单说明和使用
见证自己学习,成长的记录
03-25 5054
学习vue的计算属性之前，我们先写一个案例，我们先用插值语法实现，然后再使用vue的计算属性实现，经过对比，我们就能掌握计算属性的精髓和原理写一个简单的例子，姓和名分别用两个输入框控制，最后通过一个span标签拼接成一个全名首先通过简单的插值语法实现，需要注意，输入框需要使用v-model进行绑定看下页面，基本功能已经实现了这时候我又有个需求，就是不管输入框输入多少内容，我只截取前两个这个时候，我们可以直接在插值语法哪里截取，使用silce函数(start,num)从哪里开始截取，截取几位这样看，我们的需求
使用Vue三种方法实现简单计算器
2201_75939414的博客
04-02 3424
4:Vue.js使用@click指令绑定一个点击事件，并调用pd()方法，根据用户输入的数字和操作符计算结果，并将结果保存到result变量中。使用v-model指令将result变量的值绑定到结果显示输入框中，从而实现实时更新结果。代码实现了一个简单的计算器，用户可以在输入框中输入两个数字，选择一个操作符，并点击“等于”按钮，Vue.js会根据用户的输入进行计算，并将结果显示在另一个输入框中。2:methods属性中定义了一个方法pd()，用于根据用户的输入计算结果，并将结果保存到result变量中。
08、VUE计算属性
执手天涯@的博客
03-08 4617
1、计算属性简介 在原生的JavaScript中我们需要一个来自不同数的和的变量， 我们会使用let num=a+b:这种写法，但是当a和b发生改变的 时候，num并不会自动修改，在vue中我们提供了计算属性 可以很好的解决这个问题。 2、计算属性的语法 在vue的配置项中添加 computed:{ "计算属性名" () { return "值" } } 3、计算属性的使用 <template> <div> <!-- 调用计算属性 -->
vue2+vue3学习笔记
02-20
Vue2+Vue3 学习笔记 mounted 和 updated 在 Vue 中，`mounted` 和 `updated` 是两个非常重要...本文总结了 Vue2+Vue3 的多种知识点，包括生命周期钩子函数、数据绑定、组件间通信、路由传参、计算属性、v-model 等。
vue2+vue3笔记
07-14
十八、el 与 data 的两种写法 Vue 是什么特点：声明式Vue->resource-> awesome vue 和 cookbook 重点关注下面代码，第一个正常输出尚硅谷，第二个原格式输出{{name}}。 十九、MVVM 模型 理解 MVVM原理：把数据丢到...
Vue 中mixin 的用法详解
08-27
总之，Vue 的 `mixin` 提供了一种高效复用代码的手段，但正确使用和管理 `mixin` 很关键，以保持代码的清晰性和可维护性。在实际项目中，应谨慎评估何时使用 `mixin`，以确保代码结构的整洁和可扩展性。
Vue的计算属性
qq_50260510的博客
06-07 4081
Vue的计算属性
Vue 计算变量computed
yuxuan89814的专栏
08-13 511
本人的使用场景是希望在子组件中取到父主件传递过来的props Object变量， showData是传递来的属性变量 props:["showData"], 刚开始是在created和mounted中去赋值，发现都未能取到值 后来想到了计算变量 computed:{ checked_showData:function(){ // return JSON.parse(JSON.stringify(this
vue计算方法 computed
个人工作学习内容总结
09-08 377
当用到计算属性时，，方法默认返回的时get方法 例： computed: { fixedHeader: { return this.$store.state.settings.fixedHeader } } 这里默认返回get方法，实际计算属性 如下： computed: { fixedHeader: { get() { return this.$store.state.settings.fixedHeader },
Vue：计算属性
dangfulin的博客
11-02 1679
一，计算属性 通过前面的学习，我们可以在模板中双向绑定一些数据或表达式了。但是表达式如果过长，或逻辑更为复杂时，就会变得雕肿甚至难以阅读和维护。例如： <div id="example"> {{ message.split('').reverse().join('') }} </div> 这里是想要显示变量 message 的翻转字符串，为了达到目的。这个表达式包含了三个操作。显然，如果想要在模板中多包含此处的翻转字符串时，就会显得代码相当臃肿。 当一个属性的值依赖于其它属性的
vue项目中数学公式的展示
u012632105的博客
05-16 3077
vue项目中数学公式的展示
Vue核心技术-8,计算属性
BraveWangDev
08-17 3626
一,前言 上一篇介绍了Vue的方法和事件,在Vue实例methods选项中对方法进行定义 这一篇介绍Vue的计算属性,计算属性定义在vue实例compute选项中, compute计算属性功能上和methods中的方法很相似, 稍后我们会探讨计算属性的使用及计算属性和方法的区别 二,引入计算属性 之前介绍了插值(即双大括号表达式),支持简单的表达式和过滤器可以对值做一些简单运算和文本转...
vue-计算总和
热门推荐
qq_41346335的博客
02-18 1万+
前言 今天来做一个小练习。使用vue实现一个动态加载的计算总和。 效果图如下： 当点击前两个 数字的时候，两个数会加一，并把值赋给第三个值。 主要代码 首先定义一个全局组件count。 Vue.component("count",{ template:"<div @click='handClick'>{{number}}</div>", ...
Vue计算属性- computed:{}
liudachu的博客
09-22 3009
七、 Vue计算属性 计算属性的重点突出在属性两个字上(属性是名词)，首先它是个属性其次这个属性有计算的能力(计算是动词)，这里的计算就是个函数;简单点说，它就是一个能够将计算结果缓存起来的属性(将行为转化成了静态的属性)，仅此而已;可以想象为缓存！ <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> &l
vue计算属性前沿篇用{{}}和method实现_姓名案例
MCCLS的博客
07-14 312
当输入框内的东西改变时全名后面的内容也立马发生改变 用三种方式编写 1.用{{}}实现 双向绑定 v-model或着v-model:valiue 拼接： 第一个框不论写多长全名框只显示前三个 slice(0,3)表示截取0到3不包括3即0 1 2索引的字符 但这样违背了模板中简单的表达式的原则 用methods实现 如果直接写fullname则会把函数展现到页面上 所以得加()才能显示return的值 在绑定事件（）加...
vue中计算属性两种写法
最新发布
08-12
在Vue中，计算属性有两种常见的写法。下面我将为你介绍这两种写法。 1. 声明式写法（简写）： ```javascript computed: { // 声明一个计算属性，名为fullName fullName() { return this.firstName + ' ' + this....

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

新青年楷模

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值