如何调整 Vue.js 中的文本字段反应性

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 只是 =>

的语法糖

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

如果你想要别的东西，这很容易做到。把update side改成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>

Answer 2

是的，你应该只添加 @blur 事件，并通过它传递事件的值

然后当此事件在 methods 中被触发时，它会将 result 的值更改为输入值...因此更新仅以 blur 为条件输入

new Vue({
  el: '#app',
  data: {
    result: '',
    value:''
  },
  methods:{
   blo(e){
     this.result = e
    }
  }
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<div id="app">
<div id="app">
  <input type="text" @blur='blo(value)' v-model="value" />
  <p>{{ result }}</p>
</div>
</div>

如何调整 Vue.js 中的文本字段反应性

How to adjust text field reactivity in Vue.js

javascript

vuejs2

vue-reactivity