在使用@input
和v-model
以及@input
和:value
之间,我得到了不同的行为。
v模型与:value有何不同?我仅使用:value不能得到?
我创建了一个example at jsFiddle来显示不同之处:顶部的输入字段仅允许将数字键入到输入中,而底部的字段则允许输入所有内容。
仅使用@input
和:value
才能获得相同的功能?
答案 0 :(得分:2)
您可以通过在输入中添加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
},
}
})