Svelte 中如何正确绑定 input 的值并实时更新？

皇甫梓轩提问于 2026-03-04 17:11:19 阅读 3

框架

我在 Svelte 里用 bind:value 绑定 input，但输入内容后变量没变，是不是写法有问题？

我试过这样写：

<script>
  let name = 'John';
</script>

<input bind:value={name} />
<p>Hello {name}</p>

页面上输入新名字，下面的 p 标签却没更新，控制台也没报错，这到底哪不对？

Svelte 绑定语法

我来解答赞 0 收藏

反馈

1 条解答

慕容浩圆 Lv1

你发的这段代码其实写法是对的，Svelte 的双向绑定就是这样用的。如果页面没更新，通常不是这段代码本身的问题，大概率是以下几个坑你踩中了。

首先，检查一下你的 input 标签里是不是同时写了 value={name} 和 bind:value={name}。很多新手习惯先设个初始值，再加绑定，结果两个属性打架了。在 Svelte 里，用了 bind:value 就不需要再写 value 属性了，它自己会处理初始值。

其次，确认一下你的 input 类型。如果你写的是 type="checkbox" 或者 type="radio"，那 bind:value 是不对的，复选框得用 bind:checked。如果是普通文本输入框，不用写 type 或者写 type="text" 就行。

还有种可能是开发环境的热更新（HMR）卡住了。有时候改了逻辑浏览器没刷新，看着像没反应。试着刷新一下浏览器页面，或者重启一下 dev server。

你可以试试下面这个最精简的写法，肯定没问题：

<script>

  let name = 'John';

</script>



<!-- 只用 bind:value，别加 value 属性 -->

<input type="text" bind:value={name} />

<p>Hello {name}</p>

只要变量 name 是在 script 顶层定义的，Svelte 会自动把它变成响应式的，你输入的时候下面那个 p 标签肯定跟着变。要是还不行，看看控制台有没有报错，或者是不是把 input 放到某个条件渲染的块里导致变量作用域乱了。

2026-03-04 17:53