如何在vue.js中分离输入值和输入[type=text]中显示的值？

例如：

<span class='prefix'>+{{ prefix }}</span>
<input type='tel' v-model='phone'>

并相应显示

<span class='prefix'>+7</span>
<input type='tel' value='90012345678'>

场景：

电话等于7-100-200-30-40 前缀=+7，电话=1002003040 电话等于7 前缀=+7，电话= 电话等于7123 前缀=+7，电话号码=123 电话是空的 前缀=，电话=

---

问题：如何在不触发更新的情况下从输入中排除前缀？

我认为您需要将v-model重写为更明确的v-on+v-bind对，并监听电话号码的输入，同时分别计算前缀和其余部分：

新Vue{ el:“应用程序”， 数据：{ 前缀：， 电话：，//完整电话号码 }, 方法：{ handleInput：函数E{ 如果e.target.value==this.prefix=； 如果这是.prefix！=={ this.phone=this.prefix+e.target.value； }否则{ 常数v=e.目标值； this.phone=v； this.prefix=v.0,1； } } }, 计算：{ 不带outprefix：函数{ 返回this.prefix！==？this.phone.slice1: } } }; +{{prefix}} 电话：{{Phone}

---

它并不完全有效，因为我对您的示例有点困惑，但我认为一种方法是使用计算getter/setter

资料{ 返回{ hiddenInputValue： } }, 计算：{ 输入值：{ 得到{ 返回此.hiddenInputValue； }, 塞特瓦尔{ //对输入值执行某些操作。。。 this.hiddenInputValue=//指定输入值的修改版本。。。 } } }

---

你应该可以做些什么，但请检查我的评论。这可能是一个更好的解决方案。

并不能真正回答您的问题，但对于您的特定用例，您可能会对其vuejs版本感兴趣

<span class='prefix'>+7</span>
<input type='tel' value='90012345678'>

I use watcher for `phone`.
When user changes something inside `input` watcher must update value for `phone`, but this way it is triggered again and it receives updated (incorrect) value.