遍历多个div类并初始化vue.js

Question

我开始通过创建一个简单的项目来学习Vue.js -我正在创建这个简单的应用程序，我想列出许多待办事项列表项。

我的html结构应该是这样的:

<div id="todo-list-1" class="todo-list"></div>
<div id="todo-list-2" class="todo-list"></div>
<div id="todo-list-3" class="todo-list"></div>

和main.js

import Vue from 'vue'
import App from './App.vue'
Vue.config.productionTip = false
new Vue({
el: '#todo-list-1',
render: h => h(App)
})

App.vue

<template>
<div>
<h2>Vue Test</h2>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>

我怎么能通过我的元素动态迭代，所以我不必手动创建它们?

new Vue({
el: '#todo-list-1',
render: h => h(App)
})
new Vue({
el: '#todo-list-2',
render: h => h(App)
})
new Vue({
el: '#todo-list-3',
render: h => h(App)
})

我想创建一个模板，但为我的待办事项列表呈现不同的列表。我不能只有一个id类"app"，我想有这些的多个实例，这样我就可以使用它们在不同的地方不同的数据。

Answer 1

您可以使用querySelectorAll来遍历列表并定义新的Vue实例

document.querySelectorAll('.todo-list').forEach(list => {
new Vue({
el: `#${list.id}`,
render: h => h(App)
})
})