vue3+ts的computed属性怎么用？

首先我们要进行引入computed这个属性，然后定义用这个属性的时间我们要先相识这个属性。
这个computed其实分为里两种！一种是仅可读的，还有一种就是即可以读，又可以修改的！
那我们常用的肯定是后者！我们引入方法后，里面直接包一个对象里面装着get()set()两种方法！学习java后端的应该都不陌生！哈哈哈哈哈，然后get就是拿到这个计算的值，直接return回来即可，而set就是要对计算的值进行修改！点击之后，就可以修改这个全名了！

1. <template>
2.   <div class="person">
3.     <div>姓:<input type="text" v-model="firstName" /></div>
4.     <div>名:<input type="text" v-model="lastName" /></div>
5.     <div>
6.       全名:<span>{{ fullName }}</span>
7.     </div>
8.     <button @click="changeFullName">将全名改为li-si</button>
9.   </div>
10. </template>
12. <script lang="ts" setup name="Person">
13. import { ref, computed } from "vue";
14. let firstName = ref("zhang");
15. let lastName = ref("san");
16. let fullName = computed({
17.   get() {
18.     return (
19.       firstName.value.slice(0, 1).toUpperCase() +
20.       firstName.value.slice(1) +
21.       "-" +
22.       lastName.value
23.     );
24.   },
25.   set(val) {
26.     console.log(val);
27.     const [str1, str2] = val.split("-");
28.     firstName.value = str1;
29.     lastName.value = str2;
30.   },
31. });
32. function changeFullName() {
33.   fullName.value = "li-si";
34. }
35. </script>
37. <style scoped>
38. .person {
39.   background-color: #ddd;
40.   box-shadow: 0 0 10px;
41.   border-radius: 10px;
42.   padding: 20px;
43. }
44. </style>

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。