一个Vue小例-todo应用

一个简单的vue小例子 - 简书

<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