Vue连接字符串三个方法

Vue连接字符串三个方法一、通过methods1、定义数据2、添加绑定事件3、创建methods方法二、通过watch1、定义数据（同上）2、绑定数据（不需绑定事件）3、创建watch方法watch 内置了新值 newVal 和旧值 oldVal。三、通过computed1、定义数据注意这里没有定义 fullname。2、绑定数据3、创建computed方...

xiang_wu_la

5045人浏览 · 2019-12-15 17:35:04

xiang_wu_la · 2019-12-15 17:35:04 发布

Vue连接字符串三个方法

一、通过methods

1、定义数据

在这里插入图片描述

2、添加绑定事件

在这里插入图片描述

3、创建methods方法

在这里插入图片描述

二、通过watch

1、定义数据（同上）

2、绑定数据（不需绑定事件）

在这里插入图片描述

3、创建watch方法

watch 内置了新值 newVal 和旧值 oldVal。

三、通过computed

1、定义数据

在这里插入图片描述
注意这里没有定义 fullname。

2、绑定数据

在这里插入图片描述

3、创建computed方法

在这里插入图片描述

四、总结

使用 methods 来定义的话，比较简单方便。缺点是需要如果事件是摸不着的，这就绑定不了事件了，就行不通了，此时只能用 watch 和 computed。而 watch 弊端也很明显，太多数据的话会写的很繁琐。computed 可以说折中这两种方法，其属性的结果会被缓存。

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}$/, //不连续的两位字母// /^