vue3 +ts响应式数组dom渲染其数据

在Vue 3和TypeScript中，你可以使用ref来创建响应式数组，并使用v-for指令在DOM中渲染数组的数据。以下是一个简单的例子：

<template>
  <div>
    <div v-for="(item, index) in list" :key="index">
      {{ item }}
    </div>
    <button @click="addItem">Add Item</button>
  </div>
</template>
 
<script lang="ts">
import { defineComponent, ref } from 'vue';
 
export default defineComponent({
  setup() {
    const list = ref<string[]>(['Item 1', 'Item 2', 'Item 3']);
 
    function addItem() {
      list.value.push(`Item ${list.value.length + 1}`);
    }
 
    return { list, addItem };
  }
});
</script>

在这个例子中，list是一个响应式引用，包含一个字符串数组。v-for指令用于遍历list数组，并为数组中的每个项目创建一个div元素。addItem方法用于向list数组添加新项目，每次点击按钮时都会触发这个方法。