javascript - 如何在 Vue.js 中调整文本字段 react 性

Question

我在 Vue.js 中有一个简单的文本字段:

new Vue({
  el: '#app',
  data: {
    value: 'Test'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

<div id="app">
  <input type="text" v-model="value" ref="input" />
  <p>{{ value }}</p>
</div>

是否可以降低将数据模型中的值从“onChange”更新为“onBlur”的频率？

Answer 1

v-model 只是 => 的语法糖

:value="modelValue"@input="modelValue = $event.target.value"

如果您想要其他东西，也很容易做到。只需将更新侧更改为onBlur即可，所以=>

<input  class="form-control
    :value="value" 
    @blur="value = $event.target.value"
    @input="value = $event.target.value"
>

改进后的示例代码:

new Vue({
  el: '#app',
  data: {
    value: 'Test'
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
  <input
    type="text"
    :value="value"
    @blur="value = $event.target.value"
    ref="input"
    />
  <p>{{ value }}</p>
</div>