Это мой код
<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» после того, как я ввожу любую клавишу. (Я запускаю это снова)
Значение2 показывает «W» сразу.
Так кто-нибудь может это объяснить?
Проверьте JSFiddle
Большое спасибо.
@ Владислав Ладицкий
Я пробую простой JavaScript. Однако поведение клавиш и клавиш одинаково.
<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>