vue3:computed

白墨阳發表於2024-11-16
Vue

掃碼或者點選文字後臺提問

原文： https://mp.weixin.qq.com/s/36dd--oj6jmkZblfJRh4iw

computed 支援選項式寫法 和 函式式寫法

1.選項式寫法 支援一個物件傳入get函式以及set函式自定義操作

2.函式式寫法 只能支援一個getter函式不允許修改值的

<template>
  <div>
    <div>
      姓：<input type="text" v-model="firstName">
    </div>
    <div>
      名：<input type="text" v-model="lastName">
    </div>
    <div>
      全名：{{ name }}
    </div>
    <div>
      <button @click="changeName">修改</button>
    </div>
  </div>
</template>
<script setup lang='ts'>
import { ref, computed } from 'vue';
/**
 * computed 支援選項式寫法 和 函式式寫法
 * 1.選項式寫法 支援一個物件傳入get函式以及set函式自定義操作
 * 2.函式式寫法 只能支援一個getter函式不允許修改值的
 */
let firstName=ref('張');
let lastName=ref('三');

// //1.選項式寫法 支援一個物件傳入get函式以及set函式自定義操作
// let name=computed<string>({
//   get () {
//     // 讀取值操作
//     return firstName.value + '-' + lastName.value
//   },
//   set (newVal) {
//     // 設定值操作
//     [firstName.value,lastName.value] = newVal.split('-')
    
//   }
// });
// const changeName = () => {
//   name.value = '小-田'
// }



//2.函式式寫法 只能支援一個getter函式不允許修改值的
let name = computed(() => firstName.value + '-' + lastName.value)
</script>
<style scoped>
</style>

相關文章