-v-model修饰符 & -v-model双向绑定 -->数据与视图互相驱动

一.vue指令-v-model修饰符

作用: 让v-model拥有更强大的功能

- 语法:

• • v-model.修饰符="vue数据变量"

• • • .number   以parseFloat转成数字类型
    • .trim          去除首尾空白字符
    • .lazy           在失去焦点时触发更改而非inupt时

总结: v-model修饰符, 可以对值进行预处理, 非常高效好用

二. vue指令-v-model双向绑定

我们都知道，在Vue组件中，data部分的数据与视图之间是可以同步更新的，假如我们更新了data中的数据，那么视图上的数据就会被同步更新，这就是Vue所谓的数据驱动视图思想。这里通过双向绑定实现互相驱动

目标: 把value属性和vue数据变量, 双向绑定到一起

• 语法: v-model="data数据变量"
• 双向数据绑定

• • 数据变化 -> 视图自动同步
  • 视图变化 -> 数据自动同步

演示: 输入和选择的绑定

通过 视图 ----> 数据(通过修改视图内容,驱动数据修改)

通过 数据 ----> 视图(通过修改数据内容,驱动视图修改)

总结: v-model适用于表单开发，自动获取用户输入或选择数据