Vue 中的计算属性和侦听器

最新推荐文章于 2023-08-30 11:19:19 发布

purple_lumpy

最新推荐文章于 2023-08-30 11:19:19 发布

阅读量263

点赞数

分类专栏： Vue

本文链接：https://blog.csdn.net/purple_lumpy/article/details/81156345

版权

Vue 专栏收录该内容

35 篇文章 1 订阅

订阅专栏

Vue 中的计算属性，是指某个属性是由其他属性计算而来。只有在它所依赖的属性变化后，它才会重新计算，否则它会使用缓存值。使用它，性能上会更好一点。

computed:

<!DOCTYPE html>
<html>
<head>
	<title>计算属性和侦听器</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		姓：<input v-model="firstName">
		名：<input v-model="lastName">
		<div>{{fullName}}</div>
	</div>

	<script>
		new Vue({
			el:"#root",
			data: {
				firstName: '',
				lastName: ''
			},
			computed: {
				fullName: function(){
					return this.firstName + ' ' + this.lastName
				}
			}
		})
	</script>
</body>
</html>

侦听器，侦听某一个数据的变化，一旦该数据变化，就执行一些操作。

watch:

<!DOCTYPE html>
<html>
<head>
	<title>计算属性和侦听器</title>
	<meta charset="utf-8">
	<script src="./vue.js"></script>
</head>
<body>
	<div id="root">
		姓：<input v-model="firstName">
		名：<input v-model="lastName">
		<div>{{fullName}}</div>
		<div>{{count}}</div>
	</div>

	<script>
		new Vue({
			el:"#root",
			data: {
				firstName: '',
				lastName: '',
				count: 0
			},
			computed: {
				fullName: function(){
					return this.firstName + ' ' + this.lastName
				}
			},
			watch:{
				// firstName: function(){
				// 	this.count++
				// },
				// lastName: function(){
				// 	this.count++
				// }，
				fullName: function(){
					this.count++
				}

			}
		})
	</script>
</body>
</html>

purple_lumpy

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
Vue 中的计算属性和侦听器

Vue 中的计算属性，是指某个属性是由其他属性计算而来。只有在它所依赖的属性变化后，它才会重新计算，否则它会使用缓存值。使用它，性能上会更好一点。computed:&lt;!DOCTYPE html&gt;&lt;html&gt;&lt;head&gt; &lt;title&gt;计算属性和侦听器&lt;/title&gt; &lt;meta charset="utf-8"&
复制链接

扫一扫