vue.js 计算属性computed

最新推荐文章于 2024-04-03 15:11:04 发布

黄坤

最新推荐文章于 2024-04-03 15:11:04 发布

阅读量201

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/m0_45025658/article/details/105714484

版权

前端专栏收录该内容

10 篇文章 0 订阅

订阅专栏

<!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="div1"> 
		<!--不使用compute-->
		人民币：<input type="text" v-model.number="a1"/>
		汇率：<input  type="text" v-model.number="a2"/>	
		美元：{{a1/a2}}
		
		<br/>
		<!--使用compute-->
		人民币：<input type="text" v-model.number='a3'/>
		汇率：<input type="text" v-model.number='a4'/>
		美元：{{a5}}
		
		<br/>
		<!--使用methods也能达到同样的效果-->
		人民币：<input type="text" v-model.number='a6'/>
		汇率：<input type="text" v-model.number='a7'/>
		美元：{{a8()}}
		
		<!--使用computed和method都能达到同样的效果，但是computed是有缓存的，只要人民币没用发生
		变化，结果就会直接返回以前计算出来的值，而不是再次计算。如果是复杂计算，就会节约不少时间
		而methods每次都会调用-->
		
		</div>
	</body>
	<script>
		new Vue({
			el: '#div1',
			data:{
				a1: 20,//人民币
				a2: 2,//汇率
				a3: 20,//人民币
				a4: 2,//汇率
				a6: 20,//人民币
				a7: 2,//汇率
			},
			computed:{
				<!--使用computed后的美元数-->
				a5: function(){
					return this.a3 / this.a4;
				}
			},
			methods:{
				a8: function(){
					return this.a6 / this.a7;
				}
			}
		})
	</script>
</html>

在这里插入图片描述

详细请看：how2java

黄坤

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue.js 计算属性computed

<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title>计算属性</title> <script src="js/vue.js" type="text/javascript" charset="utf-8"></script>...
复制链接

扫一扫