Javascript keydown&；Vue中的键控_Javascript_Vuejs2_Frontend

Javascript keydown&；Vue中的键控

javascript vuejs2

Javascript keydown&；Vue中的键控,javascript,vuejs2,frontend,Javascript,Vuejs2,Frontend,这是我的密码 <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:

这是我的密码

<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>


{{value}}
{{value2}}
新Vue({
el:'临时'，
数据：{
值：“”，
值2:“”
},
方法：{
storeValue:函数（事件）{
this.value=event.target.value
},
storeValue2:函数（事件）{
this.value2=event.target.value
}
}
})

有两个文本框。在我看来，如果我在文本框中输入一个值，两个文本框的最终结果应该是相同的。然而，结果是不同的。输入任意键后，该值显示“w”。（我再次触发）值2立即显示“w”。有人能解释吗

检查

非常感谢你

@弗拉迪斯拉夫·拉迪基我尝试简单的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>


这是keyDown

我是凯普

函数keyDownFunc（）{
设temp=document.getElementById（“myInputKeyDown”）.value；
document.getElementById（“demo1”）.innerHTML=temp；
}
函数keyUpFunc（）{
让temp=document.getElementById（“myInputKeyUp”）.value；
document.getElementById（“demo2”）.innerHTML=temp；
}


{{value}}
{{value}}
新Vue({
el:'临时'，
数据：{
值：“”
},
方法：{
}
})

我认为您的问题在于按键事件在显示数据方面看起来像是一次击键

检查VueJs，对于数据更改，将进行DOM重新渲染。在这种情况下，它看起来像是按下键的计时，并且所述重新渲染导致它看起来像是按下键延迟了一个字符

在触发keydown时，storeValue被触发，

它看起来像

事件.target.value

尚未更新，因此您不会看到它被设置为

值

我认为它与Vue无关。用纯JS试试，你会得到同样的结果。这是键控向下/键控向上的经典问题。以及为什么每个人都使用输入事件的原因。

您的问题可以通过Vue的双向数据绑定功能轻松解决，就像@TechBirds的上述回答一样。下面是一个小改动的代码段，它解决了您的更新问题。我还添加了一个监视程序，如果您想进一步控制输入框的值，它将非常有帮助


{{value1}}
{{value2}}
新Vue({
el:'临时'，
数据：{
值1:“”，
值2:“”
},
观察：{
value1:'storeValue1'，
value2:'storeValue2'
},
方法：{
storeValue1（价值）{
//你可以在这里玩更多的控制
},
storeValue2（价值）{
//你可以在这里玩更多的控制
}
}
})

我相信这会回答您的问题。请不要只写代码答案；相反，请解释为什么您的代码可以解决OP的问题。