（11）svelte 教程：Forms

2024-06-04 09:28
文章标签 教程 forms svelte

本文主要是介绍（11）svelte 教程：Forms，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

（11）svelte 教程：Forms

什么是 Forms

在 Svelte 框架中，Forms 是一种用于处理用户输入数据的机制。通过 Forms，你可以创建各种输入控件，如文本框、复选框、选择框等，以便用户填写并提交数据。Svelte 提供了数据绑定、事件处理等功能，使得处理表单数据变得更加简便和直观。

逐行解释代码

App.svelte
<script>import Modal from './Modal.svelte';import AddPersonForm from './AddPersonForm.svelte';let showModal = false;let toggleModal = () => {showModal = !showModal;};
</script>

  • import Modal from './Modal.svelte';

    • 从当前目录中导入名为 Modal 的 Svelte 组件。

  • import AddPersonForm from './AddPersonForm.svelte';

    • 从当前目录中导入名为 AddPersonForm 的 Svelte 组件。

  • let showModal = false;

    • 声明一个名为 showModal 的变量，初始值为 false。这个变量用于控制 Modal 组件的显示与隐藏。

  • let toggleModal = () => { showModal = !showModal; };

    • 声明一个名为 toggleModal 的箭头函数。这个函数的作用是切换 showModal 的值，使其在 true 和 false 之间切换。
<Modal {showModal} on:click={toggleModal}><AddPersonForm />
</Modal>

  • <Modal {showModal} on:click={toggleModal}>

    • 使用 Modal 组件，并传递两个属性：
      • {showModal}：将 showModal 变量的当前值传递给 Modal 组件，使其能够根据该值决定是否显示。
      • on:click={toggleModal}：监听 Modal 组件的 click 事件，当该事件触发时，调用 toggleModal 函数。

  • <AddPersonForm />

    • 在 Modal 组件中使用 AddPersonForm 组件，表示在模态框中嵌入一个表单。
<main><button on:click={toggleModal}>Open Modal</button>
</main>
  • <main> 和 <button on:click={toggleModal}>Open Modal</button>
    • 创建一个 main 元素，并在其内部创建一个按钮。
    • on:click={toggleModal}：为按钮绑定 click 事件，当按钮被点击时，调用 toggleModal 函数，切换 showModal 的值，从而控制 Modal 的显示与隐藏。
Modal.svelte
<script>export let showModal = false;export let isPromo = false;
</script>

  • export let showModal = false;

    • 声明并导出一个名为 showModal 的变量，初始值为 false。这个变量由外部（父组件）传入，用于控制 Modal 组件的显示与隐藏。

  • export let isPromo = false;

    • 声明并导出一个名为 isPromo 的变量，初始值为 false。这个变量用于控制 Modal 组件是否具有 promo 样式。
{#if showModal}<!-- svelte-ignore a11y-click-events-have-key-events --><div class="backdrop" class:promo={isPromo} on:click|self><div class="modal"><slot></slot></div></div>
{/if}

  • {#if showModal}

    • Svelte 的条件渲染语句。如果 showModal 为 true，则渲染内部的内容。

  • <!-- svelte-ignore a11y-click-events-have-key-events -->

    • Svelte 的注释，忽略关于 a11y-click-events-have-key-events 的可访问性警告。

  • <div class="backdrop" class:promo={isPromo} on:click|self>

    • 创建一个 div 元素，类名为 backdrop，并根据 isPromo 的值动态添加 promo 类。
    • on:click|self：为 div 绑定 click 事件，并添加 self 修饰符。该修饰符确保只有在直接点击 div 元素时才会触发事件处理函数，而不会在其子元素上触发。

  • <div class="modal">

    • 创建一个类名为 modal 的 div 元素，用于显示模态框的内容。

  • <slot></slot>

    • 创建一个默认插槽。如果父组件提供了插槽内容，则渲染该内容；否则，插槽内容为空。
AddPersonForm.svelte
<script>let name;let beltColour;let age;let skills = [];const handleSubmit = () => {console.log(name, beltColour, age, skills);};
</script>

  • let name;

    • 声明一个名为 name 的变量，用于存储用户输入的名字。

  • let beltColour;

    • 声明一个名为 beltColour 的变量，用于存储用户选择的腰带颜色。

  • let age;

    • 声明一个名为 age 的变量，用于存储用户输入的年龄。

  • let skills = [];

    • 声明一个名为 skills 的数组，用于存储用户选择的技能。

  • const handleSubmit = () => { console.log(name, beltColour, age, skills); };

    • 声明一个名为 handleSubmit 的箭头函数，当表单提交时调用此函数，输出用户输入的名字、腰带颜色、年龄和技能。
<form on:submit|preventDefault={handleSubmit}><input type="text" placeholder='name' bind:value={name}><input type="number" placeholder='age' bind:value={age}><label>Skills:</label><input type="checkbox" bind:group={skills} value="fighting">fighting<br><input type="checkbox" bind:group={skills} value="sneaking">sneaking<br><input type="checkbox" bind:group={skills} value="running">running<br><label>Belt colour:</label><select bind:value={beltColour}><option value="black">black</option><option value="orange">orange</option><option value="brown">brown</option><option value="white">white</option></select><button>Add Ninja</button>
</form>

  • <form on:submit|preventDefault={handleSubmit}>

    • 创建一个表单元素，并绑定 submit 事件。当表单提交时调用 handleSubmit 函数，并通过 preventDefault 修饰符阻止默认的表单提交行为（即页面刷新）。

  • <input type="text" placeholder='name' bind:value={name}>

    • 创建一个文本输入框，用于输入名字。通过 bind:value 双向绑定，将用户输入的值赋给 name 变量。

  • <input type="number" placeholder='age' bind:value={age}>

    • 创建一个数字输入框，用于输入年龄。通过 bind:value 双向绑定，将用户输入的值赋给 age 变量。

  • <label>Skills:</label>

    • 创建一个标签，用于描述下面的技能选项。

  • <input type="checkbox" bind:group={skills} value="fighting">fighting<br>

    • 创建一个复选框，用于选择 “fighting” 技能。通过 bind:group 将复选框的值绑定到 skills 数组中。

  • <input type="checkbox" bind:group={skills} value="sneaking">sneaking<br>

    • 创建一个复选框，用于选择 “sneaking” 技能。通过 bind:group 将复选框的值绑定到 skills 数组中。

  • <input type="checkbox" bind:group={skills} value="running">running<br>

    • 创建一个复选框，用于选择 “running” 技能。通过 bind:group 将复选框的值绑定到 skills 数组中。

  • <label>Belt colour:</label>

    • 创建一个标签，用于描述下面的腰带颜色选项。

  • <select bind:value={beltColour}>

    • 创建一个选择框，用于选择腰带颜色。通过 bind:value 将选择框的值绑定到 beltColour 变量。

  • <option value="black">black</option>

    • 创建一个选项，值为 “black”，显示为 “black”。

  • <option value="orange">orange</option>

    • 创建一个选项，值为 “orange”，显示为 “orange”。

  • <option value="brown">brown</option>

    • 创建一个选项，值为 “brown”，显示为 “brown”。

  • `<option

    value=“white”>white`

    • 创建一个选项，值为 “white”，显示为 “white”。

  • <button>Add Ninja</button>

    • 创建一个提交按钮，标签为 “Add Ninja”。

以上代码展示了如何在 Svelte 中使用 Forms 来创建一个带有文本输入框、数字输入框、复选框和选择框的表单。通过数据绑定和事件处理，用户输入的数据可以方便地收集和处理。

App.svelte 完整代码

<script>import Modal from './Modal.svelte';import AddPersonForm from './AddPersonForm.svelte';let showModal = false;let toggleModal = () => {showModal = !showModal;};</script><Modal {showModal} on:click={toggleModal}><AddPersonForm /></Modal><main><button on:click={toggleModal}>Open Modal</button></main><style>main {text-align: center;padding: 1em;max-width: 240px;margin: 0 auto;}@media (min-width: 640px) {main {max-width: none;}}</style>

Modal.svelte 完整代码

<script>export let showModal = false;export let isPromo = false;</script>{#if showModal}<!-- svelte-ignore a11y-click-events-have-key-events --><div class="backdrop" class:promo={isPromo} on:click|self><div class="modal"><slot></slot></div></div>{/if}<style>.backdrop{width: 100%;height: 100%;position: fixed;background: rgba(0,0,0,0.8);}.modal{padding: 10px;border-radius: 10px;max-width: 400px;margin: 10% auto;;text-align: center;background: white;}.promo .modal{background: crimson;color: white;}</style>

AddPersonForm.svelte 完整代码

<script>let name;let beltColour;let age;// let fighting = false;// let sneaking = false;// let running = false;let skills = [];const handleSubmit = () => {console.log(name, beltColour, age, skills);};</script><form on:submit|preventDefault={handleSubmit}><input type="text" placeholder='name' bind:value={name}><input type="number" placeholder='age' bind:value={age}><!-- svelte-ignore a11y-label-has-associated-control --><label>Skills:</label><!-- <input type="checkbox" bind:checked={fighting}>fighting<br><input type="checkbox" bind:checked={sneaking}>sneaking<br><input type="checkbox" bind:checked={running}>running<br> --><input type="checkbox" bind:group={skills} value="fighting">fighting<br><input type="checkbox" bind:group={skills} value="sneaking">sneaking<br><input type="checkbox" bind:group={skills} value="running">running<br><!-- svelte-ignore a11y-label-has-associated-control --><label>Belt colour:</label><select bind:value={beltColour}><option value="black">black</option><option value="orange">orange</option><option value="brown">brown</option><option value="white">white</option></select><button>Add Ninja</button></form>

这篇关于（11）svelte 教程：Forms的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1029689。

相关文章

MySQL8.2.0安装教程分享

MySQL8.2.0安装教程分享

《MySQL8.2.0安装教程分享》这篇文章详细介绍了如何在Windows系统上安装MySQL数据库软件,包括下载、安装、配置和设置环境变量的步骤... 目录mysql的安装图文1.python访问网址2javascript.点击3.进入Downloads向下滑动4.选择Community Server5.
阅读更多...
CentOS系统Maven安装教程分享

CentOS系统Maven安装教程分享

《CentOS系统Maven安装教程分享》本文介绍了如何在CentOS系统中安装Maven,并提供了一个简单的实际应用案例,安装Maven需要先安装Java和设置环境变量,Maven可以自动管理项目的... 目录准备工作下载并安装Maven常见问题及解决方法实际应用案例总结Maven是一个流行的项目管理工具
阅读更多...
本地私有化部署DeepSeek模型的详细教程

本地私有化部署DeepSeek模型的详细教程

《本地私有化部署DeepSeek模型的详细教程》DeepSeek模型是一种强大的语言模型,本地私有化部署可以让用户在自己的环境中安全、高效地使用该模型,避免数据传输到外部带来的安全风险,同时也能根据自... 目录一、引言二、环境准备（一）硬件要求（二）软件要求（三）创建虚拟环境三、安装依赖库四、获取 Dee
阅读更多...
MySql9.1.0安装详细教程(最新推荐)

MySql9.1.0安装详细教程(最新推荐)

《MySql9.1.0安装详细教程(最新推荐)》MySQL是一个流行的关系型数据库管理系统,支持多线程和多种数据库连接途径,能够处理上千万条记录的大型数据库,本文介绍MySql9.1.0安装详细教程,... 目录mysql介绍：一、下载 Mysql 安装文件二、Mysql 安装教程三、环境配置1.右击此电脑
阅读更多...
在idea中使用mysql数据库超详细教程

在idea中使用mysql数据库超详细教程

《在idea中使用mysql数据库超详细教程》：本文主要介绍如何在IntelliJIDEA中连接MySQL数据库,并使用控制台执行SQL语句,还详细讲解了如何使用MyBatisGenerator快... 目录一、连接mysql二、使用mysql三、快速生成实体、接口、sql文件总结一、连接mysql在ID
阅读更多...
DeepSeek模型本地部署的详细教程

DeepSeek模型本地部署的详细教程

《DeepSeek模型本地部署的详细教程》DeepSeek作为一款开源且性能强大的大语言模型,提供了灵活的本地部署方案,让用户能够在本地环境中高效运行模型,同时保护数据隐私,在本地成功部署DeepSe... 目录一、环境准备（一）硬件需求（二）软件依赖二、安装Ollama三、下载并部署DeepSeek模型选
阅读更多...
电脑没有仿宋GB2312字体怎么办? 仿宋GB2312字体下载安装及调出来的教程

电脑没有仿宋GB2312字体怎么办? 仿宋GB2312字体下载安装及调出来的教程

《电脑没有仿宋GB2312字体怎么办?仿宋GB2312字体下载安装及调出来的教程》仿宋字体gb2312作为一种经典且常用的字体，广泛应用于各种场合，如何在计算机中调出仿宋字体gb2312？本文将为您... 仿宋_GB2312是公文标准字体之一，仿China编程宋是字体名称，GB2312是字php符编码标准名称（简
阅读更多...
VScode连接远程Linux服务器环境配置图文教程

VScode连接远程Linux服务器环境配置图文教程

《VScode连接远程Linux服务器环境配置图文教程》：本文主要介绍如何安装和配置VSCode,包括安装步骤、环境配置（如汉化包、远程SSH连接）、语言包安装（如C/C++插件）等,文中给出了详... 目录一、安装vscode二、环境配置1.中文汉化包2.安装remote-ssh，用于远程连接2.1安装2
阅读更多...
vscode保存代码时自动eslint格式化图文教程

vscode保存代码时自动eslint格式化图文教程

《vscode保存代码时自动eslint格式化图文教程》：本文主要介绍vscode保存代码时自动eslint格式化的相关资料,包括打开设置文件并复制特定内容,文中通过代码介绍的非常详细,需要的朋友... 目录1、点击设置2、选择远程--->点击右上角打开设置3、会弹出settings.json文件，将以下内
阅读更多...
Window Server创建2台服务器的故障转移群集的图文教程

Window Server创建2台服务器的故障转移群集的图文教程

《WindowServer创建2台服务器的故障转移群集的图文教程》本文主要介绍了在WindowsServer系统上创建一个包含两台成员服务器的故障转移群集,文中通过图文示例介绍的非常详细,对大家的... 目录一、 准备条件二、在ServerB安装故障转移群集三、在ServerC安装故障转移群集，操作与Ser
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2