Vue的计算属性

最新推荐文章于 2024-09-21 11:18:12 发布

pigpigpi

最新推荐文章于 2024-09-21 11:18:12 发布

阅读量3.1k

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/qq_40733968/article/details/123904107

版权

23 篇文章 2 订阅

订阅专栏

本文详细介绍了如何在Vue.js中创建姓名联动效果，通过插值语法限制姓氏输入的长度，并进行字符反转及首字母大写的处理。同时，探讨了计算属性的概念，包括其缓存特性、何时触发get调用以及set的使用。文章还讨论了计算属性的简写形式及其适用条件，为Vue.js开发者提供了深入理解这些特性的指导。

摘要由CSDN通过智能技术生成

一、姓名案例

效果：两个输入框：姓+名
两个输入框改变
全名也会跟着改变
实现联动效果

在这里插入图片描述

在这里插入图片描述

只收集姓的输入框里面前三位，后面不再录入
在这里插入图片描述

需要将姓输入框的前3位取出，反转后，首字母大写

在这里插入图片描述

在这里插入图片描述

注意事项：

每当界面上的firstName和LastName一改变，就要调用一次fullName()函数，重新解析模板

在这里插入图片描述

对于vue来说，属性就是data里面的数据
前面的key为属性名，后面的为属性值

在这里插入图片描述

对data里面的属性计算得到的属性就是计算属性

在这里插入图片描述

注意：vue会将get里边的this对象设置为vm

在这里插入图片描述

get只调用一次
后面再读取从缓存中读取

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

在这里插入图片描述

注意：
只读取不修改的时候才能简写

在这里插入图片描述

关注

专栏目录