Question

我是Vue.js的开头，我刚刚见到v-model部分，这是代码：

HTML：
<div id="app"> <p> {{message}} </p> <input v-model="message" id="input_id"> </div>

javascript：

var v = new Vue({
  el:"#app",
  data:{
    message: "Hello"
  }
});

var inputDOM = document.querySelector('#input_id');

setTimeout(function(){
  inputDOM.value = "Changing By timeout";
},1500);

是的，当我在input标记中输入一些文字时，innerHTML的{{1}}会在我输入时发生变化。但
如果我使用<p>函数更改setTimeout代码的值，input的{{1}}将无法更改。
是的，如果使用innerHTMl函数来更改<p>对象的值，setTimeout值将随着更改而变化。

这里是data我包括：
input
这是codepen.io

上的演示

确实没有任何目的，所以我不需要任何其他解决方案来处理双向绑定，只是有点好奇为什么。

Answer 1

当您在输入框内输入内容时，更改将由Vue的getter / setter方法处理，如本页所述：https://vuejs.org/v2/guide/reactivity.html

在上述情况下，输入框位于Vue应用程序中。因此Vue能够设置其getter / setter方法来处理这些变化。

当匿名函数在setTimeout内运行时，它在Vue应用程序之外完成。输入框的值会直接使用javascript更改，但在Vue app的范围之外。因此，不会触发其getter / setter方法。因此，更改不会反映在您的Vue模板中。

Vue.js：使用setTimeout函数改变输入值？

1 个答案: