• 章节:38
  • 访问:678
  • 时长:00:04:12
  • 日期:2019-07-02 06:33

修改App.vue 内容如下

<template>
<div id="app">
<h4 class="bg-primary text-white text-center p-2">
{{name}}'s To Do List
</h4>
<div class="container-fluid p-4">
<div class="row">
<div class="col font-weight-bold">Task</div>
<div class="col-2 font-weight-bold">Done</div>
</div>
<div class="row" v-for="t in tasks" v-bind:key="t.action">
<div class="col">{{t.action}}</div>
<div class="col-2">{{t.done}}</div>
</div>
</div>
</div>
</template>

clipboard.png

然后我们添加一个数据源

clipboard.png

<script>
export default {
name: 'app',
data() {
return {
name: "Adam",
tasks: [{ action: "Buy Flowers", done: false },
{ action: "Get Shoes", done: false },
{ action: "Collect Tickets", done: true },
{ action: "Call Joe", done: false }]
}
}
}
</script>

大家主要是看这个地方 v-for="t in tasks"