vue-model怎么操作-千锋教育

vue-model怎么操作

发布时间:2023-08-10 18:13:00

发布人:xqq

　　Vue 框架早已经不是 MVVM(Mode-View-View-Model) 双向绑定了。早在 Vue 1.0 时代，Vue 在刚出世的时候的确是 MVVM 双向绑定。自 Vue 2.0 以来，Vue 就不再是双向绑定了，而是像 React 一样是单向绑定 MV(Model-View)了。但是，在 Vue 中仍保留了双向绑定的接口，v-model 就是。

1.基本用法

<template>
 <div id="app">
  <input v-model="x">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}

　　在 JS 中修改 x 的值，input 输入框里也会随之改变。同样地，在页面中的 input 输入框内手动输入值，变量 x 的值也会随之改变。对象里的变量改变会影响视图的 input 的改变，视图中 input 的改变会影响对象里变量 x 值的改变。这就是双向绑定(Model-View-View-Model)。

　　实质上述使用 v-model 的代码等价于如下代码：

<template>
 <div id="app">
  <input :value="x" @input="x = $event.target.value">
  {{x}}
 </div>
</template>

<script>
export default {
 data(){
  return {
   x: 'init'
  }
 }
}
</script>

　　v-model 帮我们做的事就是，为 input 的 value 值设置一个动态绑定，然后在输入框的 input 事件触发后实时修改动态绑定的 value 的变量值。因此 v-model 实质是上述方式的语法糖。

　　$event 是原生 DOM 事件里的 event 事件对象。

　　3. v-model 的修饰符

　　所有修饰符都是起一个辅助的作用，其实可以在函数里自己判断条件实现。.lazyv-model 默认监听的是输入框的input 事件，原生 DOM 的input 事件就是记录实时的输入变化值。但是，我们有时不需要实时记录结果，只需要记录最终输入的结果值就可以了。

　　input 的原生 DOM 事件中还有一个change 事件，该事件是在输入框失去焦点时或按下回车键时执行的。v-model 里以.lazy 修饰符的方式切换至该监听模式。

<template>
 <div id="app">
  <input v-model.lazy="x">
  {{x}}
 </div>
</template>等价于：<template>
 <div id="app">
  <input :value="x" @change="x = $event.target.value">
  {{x}}
 </div>
</template>