vue(34)vue中CompositionAPI中計算屬性computed的使用
阿新 • • 發佈：2021-07-20
<template>
<divclass="home">
{{age}}
<br>
<button@click="add()">change</button>
<br>
{{nameAndAge}}//頁面展示計算屬性
</div>
</template>
<script> import{ref,reactive,readonly,toRefs,computed}from'vue' //引入computed exportdefault{ setup(){ letuser=reactive({ name:'tom', age:0 }); letnameAndAge=computed(()=>{//使用computed用響應式變數組合一個計算屬性 returnuser.name+""+user.age; });
functionadd(){ user.age=user.age+1; } return{...toRefs(user),add,nameAndAge};//返回nameAndAge計算屬性 }, }; </script>
<script> import{ref,reactive,readonly,toRefs,computed}from'vue' //引入computed exportdefault{ setup(){ letuser=reactive({ name:'tom', age:0 }); letnameAndAge=computed(()=>{//使用computed用響應式變數組合一個計算屬性 returnuser.name+""+user.age; });
functionadd(){ user.age=user.age+1; } return{...toRefs(user),add,nameAndAge};//返回nameAndAge計算屬性 }, }; </script>