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

Question

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

<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 指南：

记住：

 <input v-model="something">

只是语法糖：

 <input v-bind:value="something" v-on:input="something = $event.target.value">

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

此外，正如 David L 已经指出的那样，您可能应该为这个用例使用更合适的东西，比如<div> 。

Answer 2

正如 Staszek 所提到的， v-bind:value是v-model语法糖的不完整的速记。

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

输入用于向用户传达一组非常具体的功能； 他们可以与表单交互以提供他们的输入。 在这种情况下，他们不能，因为您已将表单设置为只读。 但是，只读输入不一定更好，因为它向用户暗示您实际上可以做一些事情来启用输入，在您的情况下这不是真的。

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

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