绑定 / 多行文本输入框 • Svelte Tutorial

Svelte基础绑定多行文本输入框

多行文本框和文本输入框一样都可以使用bind:value

The <textarea> element behaves similarly to a text input in Svelte — use bind:value:

App

<textarea bind:value={value}></textarea>

像这样,属性和绑定的变量名称一样, 可以使用简写形式

In cases like these, where the names match, we can also use a shorthand form:

App

<textarea bind:value></textarea>

当然这种写法对其它输入框也是一样滴，不只是<textarea>

This applies to all bindings, not just <textarea> bindings.

另外小主我感觉你又要突破了。

previous next

<script>

	import { marked } from 'marked';

	let value = $state(`Some words are *italic*, some are **bold**\n\n- lists\n- are\n- cool`);

</script>

<div class="grid">

	input

	<textarea {value}></textarea>

	output

	<div>{@html marked(value)}</div>

</div>

<style>

	.grid {

		display: grid;

		grid-template-columns: 5em 1fr;

		grid-template-rows: 1fr 1fr;

		grid-gap: 1em;

		height: 100%;

	textarea {

		flex: 1;

		resize: none;

</style>

show text show editor