关于vue的 数据双向绑定

 

vue中的数据双向绑定，就是数据变化的时候，页面发生变化，页面变化的时候，数据发生变化。

• 使用value绑定 数据
• 注册input事件（不是change事件，change事件失去焦点时发生，input是实时的）

<div class="form-item">
  <label for=""> 账号 </label>
  <input
    type="text"
    :value="formData.loginId"
    @input="formData.loginId = $event.target.value"
  />
</div>

使用input事件的时候 和 使用 v-model 的区别。

v-model 的本质是一个语法糖，绑定一个属性value，注册一个事件input。我的数据来源于value，变化后要更改这个数据。

v-model 对 DOM 接口 CompositionEvent 表示用户间接输入文本（如使用输入法）时发生的事件 做了处理。

此接口的常用事件有compositionstart, compositionupdate 和 compositionend

对于需要使用输入法 (如中文、日文、韩文等) 的语言，你会发现 v-model 不会在输入法组合文字过程中得到更新。如果你也想处理这个过程，请使用 input 事件。

下图是使用input事件，在输入法组装的过程中，右侧的值实时变化。

v-model 对于多个复选框 ☑️ 的处理， 如果绑定的是一个数组，checkbox 的 value值在这个数组中就是选中的。单个复选框的处理，是绑定一个bool值。

 

单选框，没有通过name属性来保持互斥，vue通过js来控制。

v-model事件修饰符，

• lazy
• number
• trim

v-model 也可以作用于组件，默认情况下，它会生成一个value属性和input事件，可以在组件model配置中更改。

<Comp v-model="data" />

<!-- 等效于 -->

<Comp :value="data" @input="data=$event" />

	属性	事件
普通输入框	value	input
radio，checkbox	checked	change
select	value	change
自定义组件默认情况	value	input