vue双向绑定指令

目录

v-model

v-model 指令的修饰符

---

v-model

vue 提供了 v-model 双向数据绑定指令，用来辅助开发者在不操作 DOM 的前提下，快速获取表单的数据。

<p>用户的名字是：{{ username }}</p>
<input type="text" v-model="username">
data: {
        username: 'zhangsan',
        city: '2'
      }

 打开vue的调试工具

 当修改vue调试工具里的数据，页面数据也跟着被修改，如下：

v-model 指令的修饰符

为了方便对用户输入的内容进行处理，vue 为 v-model 指令提供了 3 个修饰符，分别是：

修饰符	作用	示例
.number	自动将用户的输入值转为数值类型	<input v-model.number="age" />
.trim	自动过滤用户输入的首尾空白字符	<input v-model.trim="msg" />
.lazy	在“change”时而非“input”时更新	<input v-model.lazy="msg" />