7.Vue的compute计算属性

3.8. 【computed】

作用:根据已有数据计算出新数据(和Vue2中的computed作用一致)。

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

<script setup lang="ts" name="App">
  import {ref,computed} from 'vue'

  let firstName = ref('zhang')
  let lastName = ref('san')

  // 计算属性------只读取,不修改
  /* let fullName = computed(()=>{
    return firstName.value + '-' + lastName.value
  }) */

//计算属性有缓存,方法没有缓存
  // 计算属性------既读取又修改
  let fullName = computed({
    // 读取
    get(){
      return firstName.value + '-' + lastName.value
    },
    // 修改
    set(val){
      console.log('有人修改了fullName',val)
      firstName.value = val.split('-')[0]
      lastName.value = val.split('-')[1]
    }
  })


  function changeFullName(){
    fullName.value = 'li-si'
  } 
</script>
相关推荐
bo52100几秒前
浏览器渲染机制详解(包含渲染流程、树结构、异步js)
前端·面试·浏览器
时间会给答案scidag2 分钟前
报错 400 和405解决方案
vue.js·spring boot
普通程序员6 分钟前
Gemini CLI 新手安装与使用指南
前端·人工智能·后端
Web小助手7 分钟前
js高级程序设计(日期)
javascript
白杨木影子被拉长7 分钟前
多状态映射不同样式(scss语法)
vue.js·uni-app
Web小助手8 分钟前
js高级程序设计(4/5章节)
javascript
山有木兮木有枝_9 分钟前
react受控模式和非受控模式(日历的实现)
前端·javascript·react.js
十盒半价9 分钟前
从递归到动态规划:手把手教你玩转算法三剑客
javascript·算法·trae
流口水的兔子10 分钟前
作为一个新手,如果让你去用【微信小程序通过BLE实现与设备通讯】,你会怎么做,
前端·物联网·微信小程序
多啦C梦a13 分钟前
🪄 用 React 玩转「图片识词 + 语音 TTS」:月影大佬的 AI 英语私教是怎么炼成的?
前端·react.js