Vue3计算属性computed
Posted 月疯
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了Vue3计算属性computed相关的知识，希望对你有一定的参考价值。
计算属性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>
以上是关于Vue3计算属性computed的主要内容，如果未能解决你的问题，请参考以下文章
vue3.0 Composition API 上手初体验 神奇的 setup 函数 计算属性 computed