如何使用 :value 复制 v-models :value？

【问题标题】：How do I replicate v-models :value with :value?如何使用 :value 复制 v-models :value？
【发布时间】：2019-07-11 16:14:14
【问题描述】：

我在使用@input 和v-model 以及@input 和:value 之间得到不同的行为。

v-model 与 :value 有何不同，而我仅使用 :value 无法获得？

我创建了一个 example at jsFiddle 来显示不同之处：顶部输入字段将只允许在输入中输入数字，而底部将允许输入所有内容。

我需要做什么才能通过仅使用 @input 和 :value 来获得相同的功能？

【问题讨论】：

标签： vue.js input v-model

【解决方案1】：

您可以通过向输入添加 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
    },

  }
})

【讨论】：