上一篇

下一步

练习呈现列表

已完成

在用户决定预订邮轮之前，他们会想知道有哪些选项可供选择，以及它们的价格。 让我们来显示这些选项。

克隆入门存储库并浏览代码

已经为你提供了这个模块的入门存储库。

1. 克隆入门存储库，并通过运行以下代码在 Visual Studio Code 中打开文件夹：

   git clone https://github.com/MicrosoftDocs/mslearn-vue-dynamic-render/
   cd mslearn-vue-dynamic-render/start
   code .
   

2. 打开 index.js 文件。 注意 productClasses 的数组。 每个 productClass 都包含 name、price、seatsAvailable 和 earlyBird 属性。

显示包含选项和价格的列表

让我们更新 HTML 代码以显示包含选项及其价格的列表。

1. 打开 index.html 文件。

2. 在注释“TODO: 添加代码以显示类”之后的行中，添加以下 HTML 代码：

   <div v-for="(productClass, index) in productClasses" :key="index" class="row">
       <div class="column">
           {{ productClass.name }}
       </div>
       <div class="column">
           $ {{ productClass.price.toLocaleString('en-US') }}
       </div>
       <!-- More to come -->
   
   </div>
   

浏览代码

在前面的代码中，v-for 指令为每个 productClass 项创建了一个新的 div 元素。 代码还为每个项目生成一个 index，你将其用作显示内容的 :key。 最后，你可以看到代码为每个 productClass 项显示了 name 和 price。

备注

请注意对 toLocaleString 的调用。 由于你正在双括号 ({{ }}) 内执行操作，因此可以调用任何有效的 JavaScript。 此外，虽然区域设置字符串当前设置为 en-US，但你可以针对特定区域对其进行更新。

在 Live Server 中打开该页

Visual Studio Code 的 Live Server 扩展创建了一个开发 Web 服务器，该服务器可以在检测到更改时自动刷新页面。 安装扩展后，可以使用它来托管页面。

1. 保存所有文件。

2. 在 Visual Studio Code 中，通过选择 Ctrl+Shift+P（在 Mac 上为 Cmd+Shift+P）打开命令面板。

3. 输入“Live Server: 使用 Live Server 打开”。

   右下角的消息确认你的页面现托管在 http://localhost:5500 上。

4. 打开浏览器并转到 http://localhost:5500。

现在应会看到创建的页面。

继续