vue3笔记 computed计算属性02

1	`计算属性有缓存的，方法没有缓存`

　　下列的计算案例是只读的，不可修改的

上述代码为只读属性，优化后

<script setup lang="ts">
import { ref, computed } from 'vue'
let name = ref("zhang")
let xing = ref("sang")
console.log(name.value)
let fullName = computed({
  get() {
    return name.value.slice(0, 1).toUpperCase() + name.value.slice(1) + '-' + xing.value
  },
  set(val) {
    // console.log('set',val)
    const [str1,str2] = val.split('-')
    name.value = str1
    xing.value = str2
  }
})
function changeFullName() {
  fullName.value = "li-si"
}
</script>
 
<template>
  <div>
    <input type="text" v-model="name">
    <input type="text" v-model="xing">
    <p>{{ fullName }}</p>
    <button @click="changeFullName">1111</button>
  </div>
</template>

__EOF__

本文作者：userName
本文链接：https://www.cnblogs.com/wencaiguagua/p/18044842.html
关于博主：评论和私信会在第一时间回复。或者直接私信我。
版权声明：本博客所有文章除特别声明外，均采用 BY-NC-SA 许可协议。转载请注明出处！
声援博主：如果您觉得文章对您有帮助，可以点击文章右下角【推荐】一下。您的鼓励是博主的最大动力！