<template>
<div id="app">
<h1>{{title}}</h1}
<ul>
<li v-for='(todo,index) in todos'
:class="{'checked':todo.done}"
>{{index+1}} {{todo.value}}
<time>{{todo.created | date}}</time>
</li>
</ul>
</div>
</template>
<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;
}
li[class='checked'] {
text-decoration: line-through;
}
</style>
<script>
export default {
name: 'app',
data () {
return {
title:'vue-todos',
todos: [
{
value: '产品评审',
done: false,
},
{
value: '开发计划',
done: true
},
{
value: 'VC会议',
done: false
}
]
}
}
}
</script>
效果如图
image.png
