使用@input
和v-model
以及@input
和:value
之间的行为不同.
v-model 与 :value 的区别是什么,而我仅使用 :value 则无法得到?
我创建了一个example at jsFiddle显示差异:顶部输入字段只允许在输入中输入数字,而底部则允许输入所有内容。
我需要做什么才能仅使用 @input
和 :value
获得相同的功能?
最佳答案
您可以通过向输入添加引用并通过它更新输入值来实现此目的。检查这里。 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
},
}
})
关于vue.js - 如何复制 v-models :value with :value?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54744558/