网站建设实训总结封面,建网站要多少费用,广州社交软件app开发,网站内容优化怎么去优化呢#x1f497;#x1f497;#x1f497;欢迎来到我的博客#xff0c;你将找到有关如何使用技术解决问题的文章#xff0c;也会找到某个技术的学习路线。无论你是何种职业#xff0c;我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章#xff0c;也欢… 欢迎来到我的博客你将找到有关如何使用技术解决问题的文章也会找到某个技术的学习路线。无论你是何种职业我都希望我的博客对你有所帮助。最后不要忘记订阅我的博客以获取最新文章也欢迎在文章下方留下你的评论和反馈。我期待着与你分享知识、互相学习和建立一个积极的社区。谢谢你的光临让我们一起踏上这个知识之旅 文章目录 何为计算属性computed介绍计算属性computed计算属性computed的优势总结 何为计算属性computed 在Vue中计算属性computed是一种便捷的方式来声明基于其他属性计算的属性。它的特点是基于它们的依赖进行缓存只有在相关依赖发生改变时才会重新计算。这样可以避免不必要的计算提高应用程序的性能。 介绍计算属性computed
首先我们准备一下本节需要的案例我们的目的是将姓和名合二为一显示在span标签
templatediv classperson姓input typetext br名input typetext br全名span***/span br
/div/templatescript langts setup namePerson11/scriptstyle scoped.person {background-color: skyblue;box-shadow: 0 0 10px;border-radius: 10px;padding: 20px;}button {margin: 0 5px;}/style运行结果如下 接下来我们补全一下数据这里使用ref作为响应对象 script langts setup namePerson11import {ref} from vuelet firstName ref(zhang)let lastName ref(san)/script接下来我们引入一个知识点v-model 使用v-model指令可以简化表单数据的处理使得开发者无需手动监听表单控件的变化事件并更新数据而是直接通过绑定数据的方式实现数据的双向绑定提高了开发效率和代码可维护性。 同时我们在span标签中加入这两个数数据 div classperson姓input typetext v-modelfirstName br名input typetext v-modellastName br全名span{{ firstName }}{{ lastName }}/span br
/div运行结果 其实结果就是我们之前想要的但是这并不使用大部分情况因为如果做改动的话过于麻烦不便于维护所以我们引入了本节的知识点接下来我们上正菜~ 首先我们介绍一下语法 下面这是导入 import {ref,computed} from vue接下来我们定义一下计算属性fullName
let fullName computed((){return firstName.value.slice(0,1).toUpperCase() firstName.value.slice(1) - lastName.value})并且别忘了这里改一下
全名span{{ fullName }}/span br运行结果 前面定义的计算属性是只读了如果问为啥我解释一下那是因为之前我们是通过修改姓和名之后这个值传到了fullName而并不是对fullName直接修改。接下来我们定义一个按钮同时添加一个方法
templatediv classperson姓input typetext v-modelfirstName br名input typetext v-modellastName br全名span{{ fullName }}/span brbutton clickchangeFullName将全名改为馒头/button br
/div/templatescript langts setup namePerson11import {ref,computed} from vuelet firstName ref(李)let lastName ref(小馒)let fullName computed((){return firstName.value.slice(0,1).toUpperCase() firstName.value.slice(1) - lastName.value})function changeFullName(){fullName.value li-si}/script很不幸爆红了 接下来我们引入一对方法get和set大家应该并不陌生
templatediv classperson姓input typetext v-modelfirstName br名input typetext v-modellastName br全名span{{ fullName }}/span brbutton clickchangeFullName将全名改为馒头/button br
/div/templatescript langts setup namePerson11import {ref,computed} from vuelet firstName ref(李)let lastName ref(小馒)let fullName computed({get(){return firstName.value.slice(0,1).toUpperCase() firstName.value.slice(1) - lastName.value},set(val){const [str1,str2] val.split(-) //以-分割分别赋值firstName.value str1lastName.value str2}})function changeFullName(){fullName.value 李-馒头}/script运行如下 这样我们就可以实现了修改fullName将其变为可读可写 计算属性computed的优势
计算属性computed在Vue3中具有以下优势
简洁高效通过计算属性computed可以简洁高效地实现基于其他属性计算的属性避免了重复计算和代码冗余。
响应式更新计算属性computed会自动响应依赖的变化而更新保持界面和数据的同步。
缓存机制计算属性computed会缓存计算结果只有在相关依赖发生改变时才会重新计算提高了性能和效率。总结 通过本文的介绍我们了解了Vue3中计算属性computed的用法、特性和优势。计算属性computed作为Vue3中一个重要的特性可以帮助开发者更好地管理和维护应用程序的状态提高开发效率和用户体验。谢谢观看~ 挑战与创造都是很痛苦的但是很充实。
