2_3 Vue 计算属性，方法监听

最新推荐文章于 2023-07-12 08:48:30 发布

上晴下雪

最新推荐文章于 2023-07-12 08:48:30 发布

阅读量74

点赞数

分类专栏： vue

本文链接：https://blog.csdn.net/xueerkeji/article/details/106044663

版权

vue 专栏收录该内容

13 篇文章 0 订阅

订阅专栏

Vue 计算属性，方法监听

<!DOCTYPE html>
<html>
<head>
	<title>计算属性</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				firstName:'zhang',
				lastName:'xue'
			},
			//计算属性：有缓存机制
			computed:{
				fullName:function(){
					return this.firstName + ' ' + this.lastName; 
				}
			}
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>方法</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="app">
		{{fullName()}}
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				firstName:'zhang',
				lastName:'xue'
			},
			//方法：无缓存机制，性能不佳
			methods:{
				fullName:function(){
					return this.firstName+' '+this.lastName; 
				}
			}
		})
	</script>
</body>
</html>

<!DOCTYPE html>
<html>
<head>
	<title>监听</title>
	<script src="https://cdn.jsdelivr.net/npm/vue"></script>
</head>
<body>
	<div id="app">
		{{fullName}}
	</div>
	<script type="text/javascript">
		var app = new Vue({
			el:'#app',
			data:{
				firstName:'zhang',
				lastName:'xue',
				fullName:'zhnag xue'
			},
			//监听
			watch:{
				firstName:function(){
					this.fullName=this.firstName+ ' ' + this.lastName;
				},
				lastName:function(){
					this.lastName=this.firstName+ ' '+ this.lastName;
				}
			}
		})
	</script>
</body>
</html>

上晴下雪

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
2_3 Vue 计算属性，方法监听

Vue 计算属性，方法监听<!DOCTYPE html><html><head> <title>计算属性</title> <script src="https://cdn.jsdelivr.net/npm/vue"></script></head><body> <div id="app"> {{fullName}} </div> <script
复制链接

扫一扫