vue小案例3：任务记录本

最终效果：

那么怎么实现呢；
html部分：

<div id="app">
				<div  class="list-group ">
					<ul class="list-group-item">
						<li  class="list-group-item"><input type="text" class="form-control" v-model="inputValue" @keyup.enter="addlist" placeholder="请输入"/></li>
						<li v-for="(item,index) in list" class="list-group-item" style="height: 50px;line-height: 50px;">
							<span class="">{{index+1}}:</span>
							 {{item}}
						<button type="button" @click="droplist(index)" class="btn btn-group-sm btn-default righbtn">×</button>
						</li>
						<li v-if="list!=0" style="height: 50px;line-height: 50px;" class="list-group-item">总计：<strong>{{list.length+"条"}}</strong> <button type="button" @click="clear" class="btn btn-group-sm btn-default righbtn">清空</button></li>
					</ul>
					
				</div>
			</div>

list.length用于统计数据条数
css部分引用了bootstrap和自己的一些调整

<link rel="stylesheet" type="text/css" href="css/bootstrap.css"/>

js部分

		<script src="js/bootstrap.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			window.onload=function(){
				var app=new Vue({
					el:"#app",
					data:{
						list:["蒸羊羔","蒸熊掌","蒸鹿尾儿"],//数组初始值
						inputValue:""
					},
					methods:{
						addlist:function(){
							this.list.push(this.inputValue);//向数组添加值
						},
						droplist:function(index){
							this.list.splice(index,1);//删除
						},
						clear:function(){
							this.list=[];//清空直接给数组赋值为空
						}
					}
				})
			}
		</script>