vue小案例—记事本

css部分

 *{
            margin: 0;
            padding: 0;
        }
        .book{
            display: flex;
            justify-content: center;
            align-content: center;

        }
        #todoapp{
            width: 300px;
            border: 1px solid #000;
            
        }
        .new-todo{
            width: 298px;
            height: 35px;
        }
        li{
            list-style: none;
            margin-bottom: 10px;
        }
        button{
            background-color: #ffffff; /* Green */
            border: none;
            color: #6f6f6f;
            text-align: center;
            text-decoration: none;
            cursor: pointer;
        }
        .index{
            font-size: 14px;
            margin-right: 20px;
        }
        label{
            color: gray;
        }
        .clear-completed{
            float: right;
        }
        strong{
            margin-right: 20px;
        }
  

html部分

<div class="book">
    <section id="todoapp">
        <!--输入框-->
        <header class="header">
            <h1>记事本</h1>
            <input v-model="inputValue" @keyup.enter="add" autofocus="autofocus"
                   autocomplete="off" placeholder="请输入任务"  class="new-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" @click="remove(index)">x</button>
                    </div>
                </li>
            </ul>
        </section>
        <!--统计和清除-->
        <footer class="footer" v-show="list.length!=0">
		<span class="todo-count" v-if="list.length!=0">
			<strong>{{list.length}}</strong>items left
		</span>
            <button v-show="list.length!=0" class="clear-completed" @click="clear" >
                Clear</button>
        </footer>
    </section>
</div>

js部分

 var app=new Vue({
        el:"#todoapp",
        data:{
            list:["我想你！","我喜欢你","我爱你？"],
            inputValue:"520"
        },
        methods:{
            add:function(){
                this.list.push(this.inputValue);
            },
            remove:function(index){
                console.log("删除");
                console.log(index);
                this.list.splice(index,1);
            },
            clear:function(){
                this.list=[];
            }
        },
    })