本文是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