vue.js - 如何绑定只读输入字段？ v-bind：value还是v-model？

Question

我正在尝试实现一个简单的vue.js应用程序，我遇到了这个概念性问题：我有一小组只读输入字段显示计算字段的值。 我尝试了两种方法，我稍微倾向于v-bind方法（v模型主要用于输入），但我真的很好奇使用其中一种的后果。

<input id="cp-remaining" type="number" min="50" max="80" size="2" readonly="true" v-bind:value="characterPointsRemaining">
<input id="cp-remaining" type="number" min="50" max="80" size="2" readonly="true" v-model.number="characterPointsRemaining">

Answer 1

来自Vue.js指南：

  

记住：

wxGraphicsContext

     

只是语法糖：

<input v-model="something">

因此，使用v-model进行输入，无法更改是没有意义的，因为它永远不会生成输入事件。

此外，正如David L已经指出的那样，您可能应该使用更适合此用例的内容，例如<input v-bind:value="something" v-on:input="something = $event.target.value"> 。

Answer 2

如Staszek所述，v-bind:value是v-model句法糖的不完整的缩写。

但是，在您的情况下，您不应该使用。

输入用于向用户传达一组非常具体的功能;他们可以 与表单互动以提供他们的输入 。在这种情况下，他们不能，因为你已经形成了readonly形式。但是，只读输入并不一定更好，因为它意味着用户可以实际执行某些事情来启用输入，在您的情况下该输入不是真的。

处理这种情况的最正确方法是根本不使用输入，而是使用另一个更恰当地表示输出数据的元素，通过text interpolation绑定数据：

<div id="cp-remaining">{{characterPointsRemaining}}</div>