本文是vue快速創建工程 - 簡書的第二篇。
如下，用v-for來進行數據綁定。

<template>
<div id="app">
<h1>{{title}}</h1}
<ul>
<li v-for='todo in todos'>{{todo.value}}</li>
</ul>
</div>
</template>

<script>
export default {
  name: 'app',
  data () {
    return {
      title:'vue-todos',
      todos: [
          
    {
        value: '產品評審',
        done: false
    },
    {
        value: '開發計劃',
        done: true
    },
    {
        value: 'VC會議',
        done: false
    }
]
    }
  }
}
</script>

結果如下

image.png

這個是無序列表，也可以給其加上索引。注意v-for后面的內容。

<li v-for="(todo,index) in todos">
  {{ index+1 }}. {{ todo.value }}
</li>

結果是

image.png

加點樣式

image.png

<style>
#app {
    display:flex;
    align-items: center;
    flex-direction: column;/*important*/
}   
h1 {
    color:pink;
    font-size: 30px;
}
li {
    font-size: 25px;
    display:flex;
    align-items: center;
    list-style-type:none;
    width:400px;
    height:50px;
    background: yellow;
    margin:5px;
    flex-direction: column;
    
}
</style>

綁定ID屬性

<li v-for='(todo,index) in todos'
    :id='index'
    >{{index+1}} {{todo.value}}
</li>

該寫法等價于

<li v-for='(todo,index) in todos'
    :id='index'
    >{{index+1}} {{todo.value}}
</li>

這個檢查元素時可以看到

image.png