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模型进行输入是没有意义的，因为它永远不会产生输入事件。

此外，正如David L已经指出的那样，您可能应该针对此用例使用更合适的方法，例如<div>。