@input
我在使用andv-model
和 @input
and之间得到不同的行为:value
。
v-model 与 :value 有什么不同,而我仅使用 :value 无法获得?
我在 jsFiddle 创建了一个示例,显示了不同之处:顶部输入字段将只允许在输入中输入数字,而底部将允许输入所有内容。
我需要做什么才能通过仅使用@input
and来获得相同的功能:value
?
@input
我在使用andv-model
和 @input
and之间得到不同的行为:value
。
v-model 与 :value 有什么不同,而我仅使用 :value 无法获得?
我在 jsFiddle 创建了一个示例,显示了不同之处:顶部输入字段将只允许在输入中输入数字,而底部将允许输入所有内容。
我需要做什么才能通过仅使用@input
and来获得相同的功能:value
?
您可以通过向输入添加 ref 并通过它更新输入值来实现此目的。在这里检查。https://jsfiddle.net/RiddhiParekh/nzfr0xy3/
模板 =>
<div id="app">
<div>
<input @input="mask1"
v-model="message1"
type="text"
placeholder="Only numbers are allowed">
<p>Message1 is: {{ message1 }}</p>
<hr/>
<input @input="mask2"
:value="message2"
type="text"
ref="myInput"
placeholder="Try numbers">
<p>Message2 is: {{ message2 }}</p>
</div>
</div>
脚本 =>
new Vue({
el: "#app",
data: {
message1: "",
message2: ""
},
methods: {
mask1(input){
const validCharsForNumberFields = /[0-9]*(,|\.)?[0-9]*/gm
this.message1 = input.target.value.match(validCharsForNumberFields)[0]
},
mask2(input){
const validCharsForNumberFields = /[0-9]*(,|\.)?[0-9]*/gm
console.log(input)
this.$refs.myInput.value = input.target.value.match(validCharsForNumberFields)[0]
this.message2 = this.$refs.myInput.value
},
}
})