VUE-list渲染后-添加、删除、搜索功能

视图：

功能：1：列表渲染 2：添加功能 3：删除功能 4:关键词搜索

DIV代码如下：

	<div id="list" class="list">
		<div class="lt-nr">
			<div class="lt-tt">id:</div>
			<input class="lt-text" type="text" v-model="id" />
		</div>
		
		<div class="lt-nr">
			<div class="lt-tt">name:</div>
			<input class="lt-text" type="text" v-model="name" />
		</div>
		<div class="clear"></div>
<button class="lt-btn" @click="add()">添加</button>
<div class="blank10"></div>
		<input type="text" class="lt-ss" v-model="keywords"  placeholder="请输入您要搜索的关键词"/>
		
		<table class="table table-bordere">
			<tr><th>序号</th>
							<th>名称</th>
							<th>编辑</th>
			</tr>
			<tr v-for="item in search(keywords)" :key="item.id">
				<td>{{item.id}}</td>
				<td>{{item.name}}</td>
				<td><a href="#" @click="del(item.id)">删除</a></td>
			</tr>
		</table>
		
	</div>

vue代码如下:

<script>
	export default{
		name:'list',
		data(){
			return{
				id:'',
				name:'',
				keywords:'',
				list:[  //列表渲染
					{id:1,name:'css进阶'},
					{id:2,name:'css3进阶'},
					{id:3,name:'Javascript实战'},
					{id:4,name:'HTML基础'},
					{id:5,name:'flash制作'}
				]
			}
		},
		methods:{
			add(){ //添加功能
				var car = {id:this.id,name:this.name}
				this.list.push(car)
				this.id = this.name ='';
			},
			del(id){ //删除功能
				this.list.some((item,i)=>{
					if(item.id===id){
						this.list.splice(i,1)
						return
					}
				})
			},
			//写法2
		   //del(index){ //删除功能
			//this.book.splice(index,1)
			//},
			search(keywords){ //搜索功能
					var newList=[]
					this.list.forEach(item => {
						if(item.name.indexOf(keywords)!= -1 ){
							newList.push(item)
						}	
					});return newList
				
	},
		
	}
	}
	
</script>