Praticar a renderização de listas

  • 3 minutos

Antes de decidirem reservar um cruzeiro, os usuários vão querer saber quais opções estão disponíveis e o respectivo custo. Vamos exibir essas opções.

Clonar o repositório inicial e explorar o código

Você recebe um repositório inicial para esse módulo.

  1. Clone o repositório inicial e abra a pasta no Visual Studio Code executando o seguinte código:

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

  2. Abra o arquivo index.js. Observe a matriz de productClasses. Cada productClass tem as propriedades name, price, seatsAvailable e earlyBird.

Exibir a lista de opções e preços

Vamos atualizar o código HTML para exibir a lista de opções e seus preços.

  1. Abra o arquivo index.html .

  2. Na seção <head>, substitua a linha <script></script> pelo seguinte código HTML:

    <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

  3. Na linha após o comentário "TODO: Add code to display classes", adicione o seguinte código 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>

Explore o código

No código anterior, a diretiva v-for cria um elemento div para cada item productClass. O código também gera um index para cada item, que você usa como o :key da exibição. Por fim, você pode ver que o código exibe o name e o price de cada item productClass.

Observação

Observe a chamada para toLocaleString. Como está trabalhando dentro das chaves duplas ({{ }}), você pode chamar qualquer JavaScript válido. Além disso, embora a cadeia de caracteres de localidade esteja definida como en-US, você pode atualizá-la para sua região específica.

Abrir a página no Live Server

A extensão Live Server para Visual Studio Code cria um servidor Web de desenvolvimento que atualiza automaticamente a página conforme as alterações são detectadas. Depois de instalar a extensão, use-a para hospedar sua página.

  1. Salve todos os arquivos.

  2. No Visual Studio Code, abra a paleta de comandos selecionando Ctrl+Shift+P (ou Cmd+Shift+P em um Mac).

  3. Insira Live Server: Abrir com o Live Server.

    Uma mensagem no canto inferior direito confirma que sua página está sendo hospedada em http://localhost:5500.

  4. Abra um navegador e acesse http://localhost:5500.

Você verá a página criada.

Captura de tela da página exibindo uma lista de opções e seus preços.