Vue.js 文本输入不显示 v-model 的值

Posted 2023-04-18

【中文标题】Vue.js 文本输入不显示 v-model 的值

【英文标题】：Vue.js text input not to show the value of v-model

【发布时间】：2020-04-09 11:52:09

【问题描述】：

有没有办法让输入在 Vue.js 中不显示其预定义的 v-model 的值？ 例如，假设我有一个输入，它的 v-model 为 "value"，并且这个 v-model 已在代码的其他地方预定义。我不希望这个输入在不删除 v-model 值的情况下在 GUI 中显示“值”。就像从 GUI 中隐藏 v-model 一样。有可能吗？

【问题讨论】：

不清楚你在问什么以及你为什么要这样做。您能否用更具体的用例来澄清您的问题？

我有一个 4 步注册表单。在第三页（第 3 步）中，有一个带有 v-model “promocode”的文本输入。但是这个促销是在第一页上定义的。如果他愿意，用户可以在步骤 3 的输入中输入新的促销代码以覆盖它。这就是为什么我不希望用户在输入中看到 promocode 的值。如果他输入了新的东西，那么 promocode 的值就会改变，如果没有，那么我们继续使用 promocode 的初始值。

谢谢，这更清楚了。相信你会在下面找到答案????

【参考方案1】：

您可以不绑定值并在@input事件中设置值。

new Vue(
  el: "#app",
  data: 
  	foo: 'some default value',
  ,
)

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.min.js"></script>
<div id="app">
  <input type="text" @input="foo = $event.target.value">
  <p>foo</p>
</div>