vue3+ts的computed属性怎么用？

liuyang___2025-05-08 18:14

首先我们要进行引入computed这个属性，然后定义用这个属性的时候我们要先了解这个属性。

这个computed其实分为里两种！一种是仅可读的，还有一种就是即可以读，又可以修改的！

那我们常用的肯定是后者！我们引入方法后，里面直接包一个对象里面装着get()set()两种方法！学习java后端的应该都不陌生！哈哈哈哈哈，然后get就是拿到这个计算的值，直接return回来即可，而set就是要对计算的值进行修改！点击之后，就可以修改这个全名了！

复制代码

<template>
  <div class="person">
    <div>姓:<input type="text" v-model="firstName" /></div>
    <div>名:<input type="text" v-model="lastName" /></div>
    <div>
      全名:<span>{{ fullName }}</span>
    </div>
    <button @click="changeFullName">将全名改为li-si</button>
  </div>
</template>

<script lang="ts" setup name="Person">
import { ref, computed } from "vue";
let firstName = ref("zhang");
let lastName = ref("san");
let fullName = computed({
  get() {
    return (
      firstName.value.slice(0, 1).toUpperCase() +
      firstName.value.slice(1) +
      "-" +
      lastName.value
    );
  },
  set(val) {
    console.log(val);
    const [str1, str2] = val.split("-");
    firstName.value = str1;
    lastName.value = str2;
  },
});
function changeFullName() {
  fullName.value = "li-si";
}
</script>

<style scoped>
.person {
  background-color: #ddd;
  box-shadow: 0 0 10px;
  border-radius: 10px;
  padding: 20px;
}
</style>