vue.js - how to bind read only input fields? v-bind:value or v-model?

Question

I am trying to implement a simple vue.js applicaton and I ran into this conceptual question: I have a small set of read only input fields showing values for calculated fields. I have tried both approaches and I am slightly leaning towards the v-bind approach (v-model is mostly for inputs), but I am really curious about the consequences of using one or the other.

<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

From Vue.js guide:

Remember:

<input v-model="something">

is just syntactic sugar for:

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

So using v-model for input, that cannot be changed is pointless, as it will never generate input event.

Besides, as David L already pointed out, you probably should use something more proper for this use case, like <div>.