如何将文本输入的值绑定到Svelte中each块中添加的项？
在Svelte中，可以使用绑定语法将文本输入的值绑定到each块中添加的项。
首先，需要在Svelte组件中定义一个变量来存储文本输入的值。可以使用let关键字来声明这个变量，并将其绑定到文本输入框的value属性上。
<script>
let inputValue = '';
</script>
<input type="text" bind:value={inputValue} />接下来，可以使用each块来遍历一个数组，并将数组中的每一项渲染为相应的元素。在这个过程中，可以将文本输入的值绑定到每个项上。
<script>
let inputValue = '';
let items = ['item1', 'item2', 'item3'];
</script>
<input type="text" bind:value={inputValue} />
<ul>
{#each items as item}
<li>{item} - {inputValue}</li>
{/each}
</ul>在上面的例子中，每个li元素都会显示一个项和文本输入的值。当文本输入的值发生变化时，每个项中绑定的值也会相应地更新。
关于Svelte的更多信息和相关产品，你可以访问腾讯云的官方文档和网站：
相关·内容
我正在尝试为svelte中的文本输入添加一个极其简单的“语法高亮显示”。</script>
bind:this={editor} on:input
浏览 9提问于2021-03-04得票数 0
回答已采纳
1回答
我正在使用google自动完成我在我的字段上输入的地址。但是，当我单击按钮来获取数据时，我的数据库中并没有显示完整的地址，而是我输入的地址。</script> <script
浏览 12提问于2022-11-28得票数 1
我正在尝试绑定{#each}块中的元素并通过单击来删除它们。foodList.splice(index, 1); }; on:click={remove} {icon} {/
浏览 0提问于2021-11-05得票数 1
回答已采纳
如果相同的组件在相同的上下文中被多次使用，绑定的属性是否可以在它们的实例之间共享？ 例如，如果我有一个创建复选框的组件，如何组合字母选择器和数字选择器的选择(bind:group)？在此示例中，如果选择了多个字母，则选择内容将被正确传播和绑定。但是，如果随后选择了数字，则字母选择将替换为所选数字，而不是将所选数字连接到所选字母。// App.svelte im
浏览 14提问于2020-04-02得票数 3
回答已采纳
1回答
向svelte按钮单击处理程序传递参数的推荐方法是什么？ 用例是每个列表中的一个重复按钮。据我所知，文档只显示了如何处理单个按钮的示例，在该按钮中，您可以使用全局变量传递数据。如果您要在网格中打印出按钮列表，这就不太实用了。示例： {#each comments as c}
<div class="comment">
浏览 4提问于2019-05-28得票数 1
回答已采纳
在这种情况下，当打开页面时，会通过从组件内部绑定到值来设置父页面中未定义的绑定值。但是，当值被更改并通过{#key}块重命名组件时，父元素中的值不会再次重置，而是保留更改后的值，然后在重命名的组件中设置该值。
为什么绑定在这种情况下不起作用？这是由于第一次安装组件的顺序造成<
浏览 10提问于2022-04-21得票数 0
回答已采纳
如何合并Svelte和ReactJ的node_module (项目依赖项)？我看过指南，演示如何将ReactJS文件包含到Svelte应用程序中这将产生以下错误：
构造函数不是构造函数错误
浏览 3提问于2019-07-31得票数 0
我正在构建一个应用程序，用户可以添加和删除不同“类型”的项目。例如，可能有用户可以编辑文本的文本类型，以及用户可以插入图像的图像类型。add功能运行得非常好。当项目的类型不同时，就会出现删除的问题。以下是我的
浏览 1提问于2019-11-28得票数 0
回答已采纳
在将响应值绑定到ngFor循环中的输入类型文本时，我面临问题。*ngFor = "let item of items"> <div>
如果绑定，则所有文本框绑定相同的值。如何将</
浏览 0提问于2018-04-12得票数 0
回答已采纳
我正在尝试使用Svelte 3制作一个表单。我的表单中有一些输入。我使用#each block来进行多个输入。但问题是，输入的值绑定变得混乱，行为怪异。这是我的REPL https://svelte.dev/repl/bdc37a81cbe04654a44b138dd973b16b?version=3.31.0 尝试在输入选项1中</
浏览 13提问于2020-12-13得票数 0
回答已采纳
>
值被正确选择并绑定到selectedValues。尽管如此，当第一次加载组件时，selectedValues没有反映在select输入中-换句话说，它们没有绑定，因为select输入似乎没有确定selectedValues是否匹配任何availableValues在其他框架中，可以传递一个帮助“派生”所选值的函数，比如(foo) => foo.id == value.id，以避免对象相等的</
浏览 4提问于2022-01-13得票数 1
回答已采纳
示例和观察到的行为如下：
我有一个对象数组，每个对象都保存着传递给#each循环中新组件的数据。似乎是相当标准的东西。每个组件都有一个与其状态变量"isDescVisible“相关联的按钮，它表示”显示/隐藏更多详细信息“。到现在为止还好。我们点击“第一个”组件中的“显示详细信息”，得到第一个组件的详细信息。但是，我们在数据数组中再添加一个对象。不过，发生的事情
浏览 1提问于2022-04-15得票数 0
在Svelte中在两个页面之间移动数据的最佳实践？
我有两页，比方说First.svelte和Second.svelte。在传统框架中，我可能在First.svelte上创建一个表单，然后将其发布到Second.svelte。我可以在First.svelte表单上绑定隐藏的输入值，然后将其发布到Second.svelte
浏览 9提问于2022-05-10得票数 0
回答已采纳
在导航中，我使用了一个搜索框，在该框中，我可以输入过滤器文本，就像一个特定的电影名称和inputValue更改的基础一样，这甚至会改变到组件中的函数点。Navigation.svelte有搜索框，{# and }在PopularMovies.svelte中index.svelte
<script context='module{movie
浏览 1提问于2022-05-29得票数 0
我在mainpage.xaml中有一个文本块。我有另一个页面，它有一个文本块，它的值被绑定到可观察的集合，它的值根据该页面上的用户事件而变化。如何将另一个页面中的文本块值绑定到mainpage.xaml中的</em
浏览 0提问于2013-05-19得票数 0
在JSX中，可以将多个事件绑定到DOM元素，如下所示：在Svelte，这是手动完成的。<input on:input={inputHandler}> /
浏览 1提问于2020-03-30得票数 12
2回答
我正在与Svelte一起工作，我想问一下如何获得div的偏移宽度的值？这是我的代码 <script> let divWidth;</script>
.container { }
</styl
浏览 34提问于2021-06-22得票数 1
我是svelte的新手，正在尝试弄清楚如何修改使用它创建的项目。当前的项目有一些滑块绑定到不同的变量，我正在寻找一种方法来实现一个下拉列表，也改变这些变量中的一些。我不确定如何将var绑定到数据对象中的数量。假设我想要影响的变量是R0，当下拉菜单被选中时，我如何将R0更改为Repro？repro: 2.5 },
浏览 10提问于2021-08-03得票数 0
1回答
如何将资源文件(es、en资源)中的值绑定到页面上的元素(如文本块等)。
我已经找到了，但在本例中使用的是C#，我想这样做，但只是在元素标记上添加了一些绑定，而不是编码。
浏览 4提问于2015-03-06得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
云直播活动推荐
腾讯云开发者
