首页 > 其他分享 >vue3笔记 computed计算属性

vue3笔记 computed计算属性

时间:2024-02-29 17:57:32浏览次数:29  
标签:xing name val value 笔记 vue3 ref computed

计算属性有缓存的,方法没有缓存

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

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

<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>

  

标签:xing,name,val,value,笔记,vue3,ref,computed
From: https://www.cnblogs.com/wencaiguagua/p/18044842

相关文章

  • Vue学习笔记24--收集表单数据
    Vue收集表单数据总结:<inputtype="text"/>,则v-model收集的是value值,用户输入的就是value值。<inputtype="radio"/>,则v-model收集的是value值,且要给标签配置value值。<inputtype="checkbox"/>没有配置input的value属性,那么收集的就是checked(勾选或未勾选,是bool值)配置inp......
  • 系统科学方法概论读后笔记
    第一章:系统科学方法概论在这一章中,常绍舜教授首先介绍了系统科学方法的基本概念和发展历程。系统科学方法是一种研究复杂系统的科学方法,它强调从整体上把握系统的结构、功能和行为,以及系统之间的相互作用。系统科学方法的发展可以分为三个阶段:古典系统科学、现代系统科学和后现代......
  • lunix vscode笔记
    笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死了笨死......
  • vue3 echart组件封装
    项目中用到了很多echart图表,进行了简单的组件封装,主要包含以下功能:创建图表实例,渲染图表支持传入自定义函数,可拿到图表实例,实现个性化功能支持配置更新后图表自动刷新,可配置是清空后再刷新loading状态控制resize时图表更新支持饼图默认高亮功能实现资源引入echart资源......
  • Vue学习笔记23--监视数据总结
    Vue监视数据总结vue会监视data中所有层次的数据如何监测对象中的数据通过setter实现监视,且要在newVue时就传入要监测的数据对象中后添加的属性,Vue默认不做响应式处理如需给后添加的属性做响应式,请使用如下API:Vue.set(target,propertyName/index,vaue)或vm.$set(target,pr......
  • Go语言精进之路读书笔记第40条——理解包内测试与包外测试的差别
    测试代码存放在包含TestXxx函数的以*_test.go文件名结尾的文件中40.1官方文档的“自相矛盾”包内测试:测试代码放在与被测包同名的包中包外测试:测试代码放在名为被测包包名+"_test"的包中40.2包内测试与包外测试包内测试:优:白盒测试,高覆盖率缺:测试代码自身需要经常性的维......
  • 系统科学方法概论第五章读书笔记
    这一章我深入探讨了自组织系统法的基本理念和应用。第五章节的核心在于解释自组织系统法的概念、特征以及其在各类系统中的实际作用。自组织系统法源自于对自然界和社会现象中的自组织行为的观察和研究。一个自组织系统是能够在没有外部指令或明显控制下自发形成有序结构或模式的......
  • 欧拉函数学习笔记
    首先,\(\varphi(n)\)的值是\(n\)内与\(n\)互质的数的个数。//求n的欧拉函数值:phi[n]intgetPhi(intn){intans=n;for(inti=2;i*i<=n;i++){if(n%i==0){ans=ans*(i-1)/i;while(n%i==0)n/=i;......
  • 系统科学方法概论第一章读书笔记
    第一章节的核心在于阐述系统方法的重要性和基本思想,以及如何将其应用于实际问题的解决中。系统方法是一种研究复杂问题的方法,它强调从整体上理解和解决问题,而不是仅仅关注局部或个别现象。在实际生活和工作中,我们经常遇到各种复杂的问题,这些问题往往涉及到许多相互关联的因素和变......
  • 系统科学方法概论第二章读书笔记
    第二章节的核心在于阐述系统工程方法的基本概念、特点和实施步骤,以及如何将其应用于实际问题的解决中。系统工程方法是一种综合性的方法,它结合了系统分析、系统设计和系统管理等多个方面的知识和技术。通过系统工程方法,我们可以对复杂系统进行有效的建模、分析、设计和控制,从而实......