v-model 不能直接用在 上，因为 不是表单元素，不支持 :value 和 @input/@update:modelValue 机制；正确做法是在 内嵌入 等可编辑控件并绑定 v-model。
v-model 不能直接用在表格单元格（<td>）上，因为 <code><td> 是普通 HTML 容器元素，不是表单控件，不支持 v-model 的语法糖机制。
<h3>为什么 <td> 不能直接用 v-model
<p>v-model 只对原生表单元素（<code><input>、<textarea></textarea>、<select></select>、<checkbox></checkbox>、<radio></radio>）和满足特定接口的自定义组件生效。它依赖两个核心能力：
- 能通过
:value（或:modelValue）接收数据 - 能通过
@input（Vue 2）或@update:modelValue（Vue 3）触发更新
<td> 没有这些属性和事件，所以写 <code><td v-model="item.name"> 会报错或静默失效。
<h3>正确做法：在 td 内嵌入可编辑控件</h3>
<p>要在表格中实现“单元格级”双向编辑，实际是让单元格内包含一个可编辑的表单元素，并用 v-model 绑定其值：</p>
<p><span>立即学习</span>“<a href="https://pan.quark.cn/s/cb6835dc7db1" style="text-decoration: underline !important; color: blue; font-weight: bolder;" rel="nofollow" target="_blank">前端免费学习笔记（深入）</a>”；</p><div class="aritcle_card flexRow">
<div class="artcardd flexRow">
<a class="aritcle_card_img" href="/xiazai/skill10385" title="Vue Wrap"><img
src="https://img.php.cn/upload/skill/001/246/273/6adaf20d3191a227.jpg" alt="Vue Wrap" ></a>
<div class="aritcle_card_info flexColumn">
<a href="/xiazai/skill10385" title="Vue Wrap">Vue Wrap</a>
<p>Vue 入门指南 — JavaScript 框架</p>
</div>
<a href="/xiazai/skill10385" title="Vue Wrap" class="aritcle_card_btn flexRow flexcenter"><b></b><span>下载</span> </a>
</div>
</div>
<ul>
<li>点击进入编辑态 → 显示 <code><input> 或 <textarea></textarea>
ref([{ name: '张三' }, ...])）示例代码片段：
v-model="row.name"
@blur="editingIndex = null"
@keyup.enter="editingIndex = null"
>
{{ row.name }}
进阶：封装可编辑单元格组件
若频繁使用，建议封装一个 <editablecell></editablecell> 组件，内部接收 modelValue 和触发 update:modelValue，对外仍保持 v-model 语义：
- 父组件写法不变：
<editablecell v-model="row.price"></editablecell> - 子组件用
defineModel()（Vue 3.4+）或defineProps(['modelValue']) + defineEmits(['update:modelValue']) - 内部用
<input>实现编辑逻辑
注意边界情况
避免常见误区：
- 不要尝试给
<td> 加 <code>contenteditable="true"后强行绑定 v-model —— 它不触发 input/change 事件，无法自动同步 - 批量编辑时，确保每个单元格绑定的是独立响应式字段（如
row.name），而非共享同一个 ref - 配合
.trim或.number修饰符提升体验，例如：<input v-model.trim="row.title">
