v-model 数据绑定

<div id="app" v-cloak>
  <p>{{fullname()}}</p>
  <hr />
  <label> First Name</label>
  <input type="text" v-model="firstName" />
 
  <label> Last Name</label>
  <input type="text" v-model="lastName" />
</div>

此时在输入框中输入的操作都会自动更新 app 中的数据并实时显示在上面的表达式中。

如果是用js原生实现则需要这么多：如果只有一个还好，假如有数百个类似的更新，则必须为每个元素都赋予独立的ID。

原理

v-model 数据绑定 实际上就是由 v-bind 属性值绑定 和 v-on 事件监听 组合起来的语法糖，以下两种写法是等价的：

<input type="text" :value="firstName" @input="updateFirstName" />
<input type="text" v-model="firstName" />