Vue3【十二】09Computed计算属性

Vue3【十二】09Computed计算属性

   计算属性 获取全名 这种方式是只读的不能修改
这样界说fullName是一个计算属性，可读可写
  案例截图

目次结构

代码

Person.vue

1. <template>
2.     <div class="person">
3.         <h1>我是 Person 组件</h1>
4.         姓： <input type="text" v-model="firstName">
5.         名： <input type="text" v-model="lastName">
6.         全名：<span>{{ firstName }} - {{ lastName }}</span>
7.         全名：<span>{{ fullName }}</span>
8.         <button @click="changeFullName">修改全名</button>
9.     </div>
10. </template>
12. <script lang="ts" setup>
13. import { ref, computed } from 'vue';
15. let firstName = ref('张');
16. let lastName = ref('国老');
18. // 计算属性 获取全名 这种方式是只读的不能修改
19. // let fullName = computed(() => {
20. //     return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + ' - ' + lastName.value;
21. // });
23. // 这样定义fullName是一个计算属性，可读可写
24. let fullName = computed({
25.     get: () => {
26.         return firstName.value.slice(0,1).toUpperCase() + firstName.value.slice(1) + ' - ' + lastName.value;
27.     },
28.     set: (val) => {
29.         [firstName.value, lastName.value] = val.split('-');
30.         console.log('修改全名',val);
31.     }
32. });
34. function changeFullName() {
35.     fullName.value = '曹-国舅'
36. }
38. </script>
40. <style scoped>
41. .person {
42.     background-color: #ff9e4f;
43.     box-shadow: 0 0 10px;
44.     border-radius: 30px;
45.     padding: 30px;
46. }
48. button {
49.     margin: 0 10px;
50.     padding: 0 5px;
51.     box-shadow: 0 0 5px;
52.     ;
53. }
54. </style>

复制代码

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