<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>添加到列表</title>
<style>
#app{100%; padding:20px;}
ul,li,input{padding:0; margin:0;}
.text{200px; height:30px; padding-left:10px; margin-right: 10px;}
.button{80px; height:32px;}
.list{list-style:none; }
.list li{300px; height:40px; line-height:40px; border-bottom:1px solid #af5b5e;}
.list li span{float:left;}
.list li em{float:right;}
</style>
</head>
<body>
<div id="app">
<input type="text" class="text" v-model="value" /><input class="button" @click="addValue" type="button" value="提交" />
<ul class="list">
<li @click="delValue(index)" :key="index" v-for="(item, index) in list">{{item}}{{index}}</li>
</ul>
</div>
<script src="https://cdn.bootcss.com/vue/2.5.17-beta.0/vue.js"></script>
<script>
new Vue({
el:"#app",
data:{
value:"",
list:[],
index:""
},
methods:{
addValue:function(){
this.list.push(this.value);
this.value=""
},
delValue:function(index){
var valLength = this.list.length;
if(valLength<3){
this.list.splice(1,index)
}
else{
alert("不能更少了！")
}
}
}
})
</script>
</body>
</html>