一、姓名案例

1、姓名案例

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

在这里插入图片描述
在这里插入图片描述

2、插值语法实现姓名案例

1、简单实现

在这里插入图片描述
在这里插入图片描述

2、增加需求

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

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

在这里插入图片描述

3、使用methods实现

在这里插入图片描述
在这里插入图片描述
注意事项：

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

在这里插入图片描述
在这里插入图片描述

二、计算属性

1、什么是属性

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

在这里插入图片描述

2、计算属性

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

在这里插入图片描述

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

3、缓存

在这里插入图片描述

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

在这里插入图片描述

4、get什么时候被调用

在这里插入图片描述

5、set

在这里插入图片描述

在这里插入图片描述

6、总结

在这里插入图片描述

三、计算属性的简写形式

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

在这里插入图片描述
在这里插入图片描述

Logo
Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^

avatar Vue
cover

echarts堆叠柱状图

avatar Vue

Error in v-on handler: "TypeError: Cannot read properties of undefined (reading 'current')"

这是一个 Vue.js 错误，报错信息提示在 v-on 处理程序中出现了错误：“TypeError: Cannot read properties of undefined(读取 'current')”。这意味示在您的代码中，试图读取一个未定义的变量 'current'。您需要检查您的代码，确保 'current' 已正确定义并初始化。...

avatar Vue