Vue中用data,methods,computed,watch四种方法实现计算

已于 2023-04-02 13:04:14 修改
阅读量178 收藏
点赞数
文章标签： vue.js 前端 javascript
于 2023-04-01 18:52:44 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_71227880/article/details/129845604
版权

 效果展示：

 使用工具:HBuilder

插件:Vue.js

 1.data

<!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>=</button><br />
			<p v-if="opt=='+'">{{number1}}{{opt}}{{number2}}</p>
			<p v-if="opt=='-'">{{number1}}{{opt}}{{number2}}</p>
			<p v-if="opt=='*'">{{number1}}{{opt}}{{number2}}</p>
			<p v-if="opt=='/'">{{number1}}{{opt}}{{number2}}</p>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:""
			}
		})
	</script>
</html>

2.methods

<!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" @click="calc">
				<option value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<button >=</button><br />
			结果：{{result}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				result:""
			},
			methods:{
				calc(){
					if(this.opt=="+"){
					this.result = this.number1+this.number2}
					else if(this.opt=="-"){
						this.result = this.number1-this.number2
					}else if(this.opt=="*"){
						this.result = this.number1*this.number2
					}else if(this.opt=="/"){
						this.result = this.number1/this.number2
					}
				}
			}
		})
	</script>
</html>

 3.computed

<!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 id="input" type="number" v-model="num1"  />
			 <select v-model="selected">
				<option value ="">请选择</option>
			 	<option value ="+">+</option>
				<option value ="-">-</option>
				<option value ="*">*</option>
				<option value ="/">/</option>
			 </select>
			<input type="number" v-model="num2" />
			<button>=</button>
			<input type="text" v-model="result" onfocus="this.blur()"/>
		</div>
		<script type="text/javascript">
			var vm = new Vue({
				el:'#app',
				data:{
					num1:0,
					num2:0,
					selected:'+'
				},
				computed:{
					result:function(){
						if(this.selected === '' || this.num1=='' || this.num2 =='')
							return null
						return eval(`${this.num1}${this.selected}(${this.num2})`)
					}
				}
			})
		</script>
	</body>
</html>

 4.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 value="+">+</option>
				<option value="-">-</option>
				<option value="*">*</option>
				<option value="/">/</option>
			</select>
			<input type="text" v-model.number="number2" />
			<button>=</button><br />
			结果：{{jisuan}}
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el:"#app",
			data:{
				number1:0,
				number2:0,
				opt:"+",
				jisuan:""
			},
			watch:{
				number1:function(val){
					if(this.opt=='+'){
						this.jisuan=val+this.number2;
					}else if (this.opt=='-') {
						this.jisuan=val-this.number2;
					}else if (this.opt=='*') {
						this.jisuan=val*this.number2;
					}else if (this.opt=='/') {
						this.jisuan=val/this.number2;
					};
				number2:function(val){
					if(this.opt=='+'){
						this.jisuan=this.number1+val;
					}else if(this.opt=='-'){
						this.jisuan=this.number1-val;
					}else if(this.opt=='*'){
						this.jisuan=this.number1*val;
					}else if(this.opt=='/'){
						this.jisuan=this.number1/val;
					}
				},
			}
		})
	</script>
</html>

uu_hug
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
vue响应式原理理解（data,computed,watch）
qq_45428582的博客
08-29 835
摘要 双向绑定之前写过一次了。 本文从data,watch,comuted的实现原理出发，并根据自己的理解进行了总结。 先贴个大佬文章链接：实现一个最精简的响应式系统来学习Vue的data、computed、watch源码 讲的非常清晰，让我对响应式有了更深刻更清晰的理解。 vue2响应式原理解析 data的响应 vue2中的简单而言就是object.defineProperty劫持get和set，对于数组直接赋值等操作不能实现响应式，对于data中新增的属性也不支持响应，必须用vue.$set设置。 vu
vue中的data,computed,methods,created,mounted
qq_59541478的博客
09-07 5554
本文将介绍一下vue的基本结构中各分类的含义以及他们的执行顺序。（包括data,computed,methods,created,mounted）
vue数据选项data、computed、methods使用方式
weixin_44853999的博客
10-17 1195
data data是里面的数据是全局属性，可以在export default{ } 任何地方调用。 deta是方法所以写成data（）{ return{ } }。数据都写在return{} 里面 数据呈键值对形式： data(){ return（）{ message:'数据', num:12 } } ...
Vue数据（data）方法（methods）、计算（computed）的介绍使用
y17757773039的博客
09-08 6203
今天学习的vue的一些基本方法属性（data，methods，computed）
Vue 里的computed与methods
weixin_43489400的博客
07-28 331
Vue 里的computed与methods 概述： 大的方向上，使用复杂的逻辑运算，要使用computed，即计算属性 1、顾名思义，计算属性在HTML模板{{}}里，是以属性来调用的，比如： {{computed}}，而dethods是以方法来调用的，比如：{{methods ()}}。 2、computed具有缓存功能，methods不具有，比如如下代码： <!--HTML代码--&g...
Vue的data、computed、watch源码浅谈
10-15
本文将深入探讨Vue中data、computed和watch三个关键概念的源码实现，帮助理解它们的内部工作机制。 首先，`data` 是Vue实例中用于存放可响应式数据的地方。当我们在Vue组件中定义`data`，Vue会将其中的属性转换为...
Vue中的methods、watch、computed的区别
10-17
主要介绍了Vue中的methods、watch、computed的区别，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Vue.js计算机属性computed和methods方法详解
10-16
计算机属性是Vue中用于创建基于其他数据属性动态计算的新属性的一种机制。它们是缓存的，意味着只有当其依赖的数据属性发生变化时，计算机属性的计算过程才会重新执行。这有助于提高性能，因为如果依赖的数据没有...
vue中watch和computed的区别与使用方法
10-14
Vue.js 是一款流行的前端...了解这些基本概念后，开发者可以根据项目需求，明智地在 Vue 应用中利用 `watch` 和 `computed` 来实现数据的动态响应和视图的高效更新。记得查阅 Vue 官方文档以获取最新的信息和最佳实践。
vue 中data和computed的区别 computed和method区别
qq_40710228的博客
11-23 1387
首先我们先看看官方怎么解释的 data： Vue 实例的数据对象。Vue 将会递归将 data 的属性转换为 getter/setter，从而让 data 的属性能够响应数据变化。 深入理解响应式原理： 当你把一个普通的 JavaScript 对象传给 Vue 实例的 data 选项，Vue 将遍历此对象所有的属性，并使用 Object.defineProperty 把这些属性全部转为 get...
Vue计算属性的使用
08-29
本篇文章主要介绍了Vue计算属性的使用，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
vue 重学笔记(1) data,computed,watch,method基础属性
weixin_39553363的博客
10-12 500
在学习vue之前，我们安装2个开发工具和1个插件， 1.HBuilder X 编辑器 2.chrome浏览器 3.vue.js devtools vue.js devtools是chrome浏览器里一个插件，需要我们在chrome网上应用店里面安装。 安装完成后，打开chrome浏览器的调试工具就会找到它。安装此插件会在我们开发vue项目的时候有比较好的开发提示和修复项目的debug，我们将会在往后的学习中更加详细的演示。 接下来，让我们深入认识认识vue 1.如何在页面引入vue.js &lt
vue基础篇笔记（二）computed、methods和watch
团酱
12-13 920
1、
Vue method与computed的区别
苦艾文艺
07-28 4万+
为了说明method与computed的区别，在此我想先来看看computed属性在vue官网中的说法：模板内的表达式是非常便利的，但是它们实际上只用于简单的运算。在模板中放入太多的逻辑会让模板过重且难以维护。 下面我们来看看一个例子：<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title
vue+element实现计算器
敲代码无敌小奶龙的博客
02-07 1695
vue+element实现计算器
vue中computed和watch和data的区别和使用
书中自有妍如玉的博客
08-11 1166
函数，只有值发生改变才会执行。如果我们需要在最初绑定值得时候也执行函数，就需要用到 immediate 属性。2.computed是计算属性，实际上和data对象里的数据属性是差不多的（使用上）3.watch:类似于监听机制+事件机制。(监听某个变量,里面可以运行事件)。watch 的用法有个特点，就是当值第一次绑定的时候，不会执行。1.data通常与v-model结合使用，是双向绑定的。又可以单独监听对象的某个属性值：监听obj的age属性。监听引用类型的数据：如对象、数组等。监听基础类型的数据。...
vue.js入门（2）——vue.js里的数据操作(data,methods,computed,watch)
热门推荐
我不是水哥
02-24 5万+
关于vue.js的学习官方文档里有教程 https://cn.vuejs.org/v2/guide/ 赞一下vue.js的维护人员，我会按照官方的API里整合的目录分模块进行学习 本章内容是有关vue的数据处理，主要介绍data,computed,method,watch，有关props值传递，会单独开一章玩一下。ok，进入正题。(如对数据操作感兴趣的请看 个人对computer和filte...
深入解析vue脚手架methods,computed,data
书读百遍其意自现
09-29 1022
目录 数据 Data Property 方法 methods 计算属性 computed 数据 Data Property 组件的data选项是一个函数. Vue在创建新组件实例的过程中调用此函数. 它应该是一个对象,然后Vue会通过响应系统将其包裹起来,并以$data的形式存储在组件实例中. 为方便起见, 该对象的任意顶级property也直接通过组件实例暴露出来. export default { // data 是一个函数 // data为了存储数据,并将数据放在实
vue中的methods,watch和computer区别
qq_54250695的博客
12-26 1185
借鉴，总结学习了一下 <!DOCTYPE html> <html lang="en"> <head> <title>Document</title> <script src="js/vue.js"></script> </head> <body> <div id="root"> 姓:<input type="text" v-...
vue中data和computed和watch
最新发布
04-08
computed是一个计算属性，依赖于vue实例中的其他属性，可以通过计算得出新的数据并返回，类似于vue实例中的一个属性或方法。 watch是监听data或computed中定义的数据的变化，当这些数据发生变化时，会触发watch中...

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

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

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值