SOURCE

 var app= new Vue({
        el:"#todoapp",
        data:{
            list:["睡觉","吃饭","画画"],
            inputValue:" "
            
        },
        methods:{
            add:function(){
                this.list.push(this.inputValue);
            }
        }
 })

<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
<section id="todoapp">
    <!--输入款-->
    <header class="header">
        <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus" autocomplete="\off" placeholder="请输入任务" class="todo"/>
    </header>
    <!--列表区域 -->
    <section class="main">
        <ul class="todo-list">
            <li class="todo" v-for="(item, index) in list">
                <div class="view">
                    <span class="index">{{index+1}}</span>
                    <label>{{item}}</label>
                    <button class="destroy"></button>
                </div>
            </li>
        </ul>
        
    </section>
    <!--统计清空-->
    <footer class="footer"></footer>
</section>

/* .main>.todo-list>.todo>.view>.index{
    
} */
.main>.todo-list>.todo>.view>.destroy{
    float: right;
    
}