SOURCE

new Vue({
        el:'#app',
        data:{
            massige:'hh',
            test:['吃','he','papapa']
        },
        methods:{
            add:function(){
							this.test.push(this.massige);   
            },
						del:function(){
							this.test.shift();
						},
						delall:function(){
							var last=this.massige;
							
							this.test.length=0;
							this.massige=' ';
							this.massige=last;
						},
					del_self:function(index){
						this.test.splice(index,1)
						
					}
        }


    })

<div id="app">
        <input type="text" class="title" v-model='massige' @keyup.Enter='add'>
        <ul>
            <li v-for='(item,index) in test'>
                {{index}}.{{item}}
							<span class='del_this' @click='del_self(index)'>X</span>
            </li>
        </ul>
        <p><input type="button" value="delect" @click='del' v-show='index!=0'><input type="button" value="delect all" @click='delall'></p>
    </div>

*{
        margin: 0;
        padding: 0;
    }
    #app{
        width: 200px;
        height: auto;
    }
    ul{
        width: 200px;
        height: auto;
    }
    .title{
        width: 200px;
        height: 30px;
        border: 1px solid #000;
    }
    li{
        width: 200px;
        height: 30px;
        border-bottom: 2px solid #000;
    }
    p>input:nth-child(2){
        margin-left: 100px;
    

    }
.del_this{
	width:20px;
	height:20px;
	background-color:pink;
	float:right;
	display:none;
	margin-top:10px;
	
}
li:hover span{
	display:block;
}