本文是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>
结果如下
这个是无序列表,也可以给其加上索引。注意v-for后面的内容。
<li v-for="(todo,index) in todos">
{{ index+1 }}. {{ todo.value }}
</li>
结果是
加点样式
<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>
这个检查元素时可以看到