Using the <lightning-combobox>

DEX602 - Unit 2 Introducing Lightning Web Components

📄 第 170 页 🎬 视频课程

课程章节介绍

让我们来简单理解一下这段代码。 首先,我们有一个 `lightning-combobox` 组件,它是一个下拉菜单。这个组件有几个重要的属性: 1. ,label,:这是下拉菜单的标签,显示在菜单旁边,告诉用户这个菜单是用来选择什么的。在这里,标签是 "Country",表示这是一个选择国家的菜单。 2. ,value,:这是当前选中的值。我们用一个变量 `value` 来存储它。初始值是 'uk',表示默认选中的是英国。 3. ,options,:这是下拉菜单中的选项列表。我们通过一个叫做 `options` 的 getter 方法来定义这些选项。每个选项都有一个 `label` 和一个 `value`。`label` 是显示在下拉菜单中的文本,而 `value` 是实际存储的值。比如,`label` 是 "UK",`value` 是 "uk"。 4. ,onchange,:这是一个事件处理函数,当用户选择了一个新的选项时,这个函数会被调用。在这里,我们定义了一个 `handleChange` 函数来处理这个事件。当用户选择了一个新的国家时,`handleChange` 函数会更新 `value` 变量,使其等于用户选择的新值。 最后,我们在页面上显示当前选中的国家。通过 `{value}`,我们可以动态地显示用户选择的国家。 总结一下,这段代码实现了一个简单的国家选择器。用户可以从下拉菜单中选择一个国家,选中的国家会实时显示在页面上。