（2）svelte 教程：点击操作，输入框和数据绑定

（2）svelte 教程：点击操作，输入框和数据绑定

• 点击操作

以下是对这段代码的逐行解释：

<script>
    export let name;
    let beltColour = "black";

    const handleClick = () => {
     
     
        beltColour = "orange";
    };
</script>

这段代码是 Svelte 组件中的脚本部分，用于定义组件的逻辑和状态。

• export let name;：这行代码声明了一个名为 name 的变量，并将其导出，使其成为一个可由父组件传递的属性。也就是说，父组件可以通过传递 name 属性来为这个变量赋值。
• let beltColour = "black";：这行代码声明了一个名为 beltColour 的变量，并将其初始值设置为 "black"。这个变量用于保存腰带的颜色。
• const handleClick = () => { beltColour = "orange"; };：这行代码定义了一个名为 handleClick 的函数，当该函数被调用时，会将 beltColour 变量的值更新为 "orange"。

<main>
    <h1>Hello {name}!</h1>
    <p>{beltColour} belt</p>
    <button on:click={handleClick}>update belt colour</button>
</main>

这段代码是 Svelte 组件的模板部分，用于定义组件的 HTML 结构和绑定的动态内容。

• <main>：这是一个 HTML <main> 元素，用于包裹组件的主要内容。
• <h1>Hello {name}!</h1>：这是一个 HTML <h1> 标题元素，使用 {name} 表达式将 name 变量的值插入到标题中。这意味着当 name 变量的值改变时，标题的内容也会动态更新。
• <p>{beltColour} belt</p>：这是一个 HTML <p> 段落元素，使用 {beltColour} 表达式将 beltColour 变量的值插入到段落中。这