Vue3计算属性computed

最新推荐文章于 2024-10-08 17:25:04 发布

月疯

最新推荐文章于 2024-10-08 17:25:04 发布

阅读量1.3k

点赞数

分类专栏：【VUE.js】

本文链接：https://blog.csdn.net/chehec2010/article/details/119764418

版权

【VUE.js】专栏收录该内容

33 篇文章 3 订阅

订阅专栏

本文介绍了Vue.js中的计算属性，用于处理和包装数据。计算属性依赖于普通属性，当普通属性变化时，计算属性会自动更新。示例中展示了如何使用计算属性进行字符串反转和数值加倍，并通过get和set方法实现数据双向绑定。点击按钮修改msg和num属性，计算属性reverseMsg和doubleNum随之更新。

摘要由CSDN通过智能技术生成

计算属性computed是用来存储属性数据的

对数据进行逻辑处理操作，实现数据包装

计算属性通常依赖于当前vue对象中的普通属性

当依赖的依赖的普通属性发生变化的时候，计算属性也会发生变化

计算属性俩部分构成：

get用来获取计算属性

set用来设置计算属性

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="./js/vue.js"></script>
	</head>
	<body>
		<div id="app">
			<p>{{ msg }}</p>
			<!-- 对普通属性进行逻辑处理，然后再展示 -->
			<p>{{ msg.toUpperCase().split(' ').reverse().join(' ') }}</p>
		    
			<p>{{ reverseMsg }}</p>
			<button @click="msg= 'hello word'">修改属性</button>
			
			<p>{{ num }}</p>
			<p> {{ doubleNum }} </p>
			<button @click="doubleNum= 8">修改属性</button>
		</div>
		<script>
			Vue.createApp({
				data(){//普通属性
					return{
						msg:'welcom to vue',
						num:4
					}
				},
				computed:{//计算属性
					reverseMsg:function(){
						return this.msg.toUpperCase().split(' ').reverse().join(' ')
					},
					doubleNum:{//同时制定get和set函数
						get:function(){
							return this.num*2
						},
						set:function(value){
							this.num=value//由于doubleNum依赖于num,所以要给num赋值
						}
					}
				}
			}).mount("#app")
		</script>
	</body>
</html>