Vue3计算属性computed

最新推荐文章于 2024-05-13 17:58:23 发布

月疯

最新推荐文章于 2024-05-13 17:58:23 发布

阅读量1.3k

点赞数

分类专栏：【VUE.js】

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

版权

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

33 篇文章 3 订阅

订阅专栏

计算属性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>

月疯

关注

0
点赞
踩
0

收藏

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

计算属性computed是用来存储属性数据的对数据进行逻辑处理操作，实现数据包装计算属性通常依赖于当前vue对象中的普通属性当依赖的依赖的普通属性发生变化的时候，计算属性也会发生变化计算属性俩部分构成：get用来获取计算属性set用来设置计算属性<!DOCTYPE html><html> <head> <meta charset="utf-8"> <title></title> <.
复制链接

扫一扫