列表渲染

0 前言

当我们想要快速生成一个列表的时候，可以通过使用vue的v-for简单高效的生成。

1 语言

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref(['Apple', 'Banana', 'Orange']);
</script>

我们看重点

    <div v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </div>

通过v-for可以生成多个<div>，

里面的items表示我们声明的字符串数组，然后(item，index)中item表示数组的值，index表示item所在的序号.，然后可以通过{{}}把对应的数值展现出来。

而其中key表示每个div的唯一标识。

同时当items增加新的值的时候，页面也会动态显示结果，示例如下，

<template>
  <div>
    <div v-for="(item, index) in items" :key="index">
      {{ index + 1 }}. {{ item }}
    </div>
    <button @click="addItem">添加新项</button>
  </div>
</template>

<script setup>
import { ref } from 'vue';

const items = ref(['Apple', 'Banana', 'Orange']);

const addItem = () => {
  items.value.push('New Item');
};
</script>

效果如下，

我们通过addItem实现对给items字符串数组添加值，然后页面也会动态显示对应的值。

这就是vue比原生js的优点，可以高效实现数值和页面的联动。

2 结语

OK，我们接下来继续看新的语法。