v-mode 双向数据绑定

Posted 2023-03-25

参考技术A

数据改 ， 视图更
视图改， 数据更

使用v-model实现

v-model默认绑定value属性， 所以v-model只能在表单使用

虽然Object.defineProperty通过为属性设置getter/setter能够完成数据的响应式，但是它并不算是实现数据的响应式的完美方案，主要缺陷有

解决方法

3.无法监听数组变化

关于 v-model 指令的修饰符有：.lazy、.number、.trim。它们主要是给 v-model 指令起到一个辅助作用。官方文档

在默认情况下，v-model 在每次 input 事件触发后，会即时将输入框的值与数据进行同步，如果你不希望这样的话，可以添加 lazy 修饰符，从而转为在 change 事件之后进行同步：

如果想自动将用户的输入值转为数值类型，可以给 v-model 添加 number 修饰符：

这通常很有用，因为即使在 type="number" 时，html 输入元素的值也总会返回字符串。如果这个值无被 parseFloat() 解析，则会返回原始的值。

如果要自动过滤用户输入的首尾空白字符，可以给 v-model 添加 trim 修饰符：

Angular 手动实现ngModal数据双向绑定

参考技术A Angular中我们在formsModule中使用ngModel实现数据的双向绑定

这里的ngModel其实是个语法糖，它等价与属性绑定+事件绑定，就像下面这样

也可以写成普通的属性绑定+普通事件

自己来实现一个双向绑定
父组件

子组件html：

子组件ts

这样就完成了， 对于父组件来说，就是实现了子组件的数据双向绑定！