Vue 2如何将响应式数据绑定到input的value属性？

在Vue 2里，插值语法{{}}只能用于HTML内容区域（比如<p>标签内部），不能直接用在HTML属性上。你在<input value="{{useragent}}" />里这么写，浏览器会把{{useragent}}当成普通字符串解析，不会触发Vue的响应式绑定。

正确的两种绑定方式 #

1. 单向绑定（仅展示，不允许用户修改） #

用v-bind:value（或简写:value）将input的value属性和Vue的响应式数据绑定：

<input :value="useragent" readonly />
<input :value="tsFormatted" readonly />

添加readonly可以防止用户编辑输入框内容，适合纯展示场景。

2. 双向绑定（允许用户修改，数据同步更新） #

如果需要用户能编辑输入框，同时让Vue的数据跟着更新，用v-model：

<input v-model="useragent" />

注意：tsFormatted是计算属性，默认只读，不能直接用v-model；若要实现双向绑定，需给该计算属性添加get和set方法。

你的代码修改示例 #

把<div id="app">部分改成下面这样即可正常渲染：

<div id="app">
  <p>{{useragent}}</p>
  <p>{{tsFormatted}}</p>
  <!-- 单向绑定展示useragent -->
  <input :value="useragent" readonly />
  <!-- 单向绑定展示格式化后的时间 -->
  <input :value="tsFormatted" readonly />
</div>

补充说明 #

• Vue的属性绑定必须用v-bind指令，这是框架规则，所有HTML属性的动态绑定都要遵循这个方式，不只是input的value属性。
• 你代码里的watch逻辑可正常工作，只要绑定方式正确，数据更新后input会自动同步显示最新值。

内容的提问来源于stack exchange，提问作者jackson hill