Question

这是我的代码

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="temp">
<div>
<input type="text" v-on:keydown = "storeValue">
<p>{{ value }}</p>
</div>
<div>
<input type="text" v-on:keyup = "storeValue2">
<p>{{ value2 }}</p>
</div>
</div>
<script>
new Vue({
    el:'#temp',
    data:{
        value:'',
        value2:''
    },
    methods:{
        storeValue:function(event){
            this.value = event.target.value
        },
        storeValue2:function(event){
            this.value2 = event.target.value
        }
    }
})
</script>

有两个文本框。我认为，如果我在文本框中输入值，则两个文本框的最终结果应该相同。但是，结果不同。输入任何键后，值显示为“ w”。（我再次触发它） value2立即显示“ w”。有人可以解释吗？

检查JSFiddle

非常感谢。

@弗拉迪斯拉夫·拉迪奇我尝试普通的javascript。但是，keydown和keyup行为是相同的。

<html>
    <p>This is keyDown</p>
    <input type="text" id="myInputKeyDown" onkeydown="keyDownFunc()" >
    <p id="demo1"></p>

    <p>This is keyUp</p>
    <input type="text" id="myInputKeyUp" onkeydown="keyUpFunc()" >
    <p id="demo2"></p>
</html>

<script>
    function keyDownFunc(){
        let temp = document.getElementById("myInputKeyDown").value;
        document.getElementById("demo1").innerHTML = temp;
    }

    function keyUpFunc(){
        let temp = document.getElementById("myInputKeyUp").value;
        document.getElementById("demo2").innerHTML = temp;
    }
</script>

Answer 1

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="temp">
<div>
<input type="text" v-model="value">
<p>{{ value }}</p>
</div>
<div>
<input type="text"v-model="value">
<p>{{ value }}</p>
</div>
</div>
<script>
new Vue({
    el:'#temp',
    data:{
       value:''
    },
    methods:{
    }
})
</script>

你想要这个吗？

Answer 2

我认为您的问题是击键事件，就显示数据而言，这就像是一次击键。

检查lifecycle hooks个VueJ，以获取数据更改，其中包含DOM重新呈现。在这种情况下，按键按下的时机看起来像这样，并且上述重新渲染使按键按下似乎晚了一个字符。

在触发键按下时，storeValue被触发，看来event.target.value尚未更新，因此您不会看到它已设置为value

Answer 3

我认为这与Vue无关。用纯JS尝试，您将获得相同的结果。这是keydown / keyup的经典问题。以及每个人都使用输入事件的原因。

Answer 4

可以通过Vue的双向数据绑定功能轻松解决您的问题，就像@TechBirds的上述答案一样。以下是带有少量更改的代码段，可解决您的更新问题。我还在其中添加了一个观察程序，如果您想进一步控制输入框的值，将会有很大的帮助。

<script src="https://npmcdn.com/vue/dist/vue.js"></script>

<div id="temp">
<div>
<input type="text" v-model="value1">
<p>{{ value1 }}</p>
</div>
<div>
<input type="text"v-model="value2">
<p>{{ value2 }}</p>
</div>
</div>
<script>
new Vue({
    el:'#temp',
    data: {
       value1:'',
       value2:''
    },
    watch: {
      value1: 'storeValue1',
      value2: 'storeValue2'
    },
    methods:{
      storeValue1(value) {
        // you can play here for more control
      },
      storeValue2(value) {
        // you can play here for more control
      }
    }
})
</script>

12345678

Vue中的按键和按键

4 个答案: