使用vue完成表单动态添加，删除，搜索

注意：

• 下面代码的实现是基于vue的，所以在使用之前要先使用vue-cli搭建项目

搜索功能效果图

添加功能效果图

知识点

• vue数据双向绑定
• 使用过滤器对时间进行处理
• 自定义指令，页面已下载，搜索框自动获取焦点

源代码

  <div class="hello">
		 <label>
				Id:
						<input type="number" v-model="id" />
		</label>
		<label>
				Name: 
						<!-- @keyup.enter 使用Vue已经封装好的回车键键盘码事件  -->
						<input type="text"  v-model="name" @keyup.enter="btnClick()" />
		</label>
		<!-- 在Vue中，使用事件绑定机制，为元素指定处理函数的时候如果加了小括号，就可以给函数传参了 -->
		<input type="button" value="添加" @click="btnClick()" />
		<label>
				搜索名称关键字:
						<input type="text" v-model="keyWords" v-focus v-color="'#f00'"  />
						<!-- v-color="blue" 这个时候会把blue当作变量去vm实例中查找，所以要加单引号 -->
		</label>
		<div>
			<table border="1" style="margin: 100px auto;" cellpadding="10" cellspacing="0" width="500">
				<thead>
					<tr>
						<th>ID</th>
						<th>Name</th>
						<th>Operation</th>
					</tr>
				</thead>
				<tbody>
					<!-- <tr v-for="(item,index) in list" :key="index"> -->
					<tr v-for="(item,index) in search(keyWords)" :key="index">
						<td>{{ item.id }}</td>
						<td>{{ item.name }}</td>
						<td>{{ item.ctime | timeFormat }}</td>
						<td><a href="#" @click="delClick(item.id)">删除</a></td>
					</tr>
				</tbody>
			</table>
		</div>
  </div>
</template>

<script>
export default {
  // name: 'HelloWorld',
  data () {
    return {
      id:'',
			name:'',
			keyWords:'',
			list:[
			    {id:1,name:'奔驰',ctime:new Date()},
			    {id:2,name:'宝马',ctime:new Date()},
			    {id:3,name:'奥迪',ctime:new Date()},
			    {id:4,name:'劳斯莱斯',ctime:new Date()},
			    {id:5,name:'越野',ctime:new Date()},
			],
    }
  },
	methods:{
		// 添加
		btnClick(){
			let flag = true;
			this.list.forEach((item,index) => {
				if(item.id == parseInt(this.id)){
					flag = false;
					item.name = this.name;
				}
			})
			if(flag){
				var car = {id:this.id,name:this.name,ctime:new Date()};
				this.list.push(car);
			}
			this.id = this.name = '';
		},
		// 删除
		delClick(id){
			this.list.splice(id-1,1);
		},
		// 根据关键字，进行查询
		search(key){
			var newList = this.list.filter(item => {
				if(item.name.includes(key)){
					return item;
				}
			})
			return newList;
		}
	},
	// 定义局部指令
	directives:{
		focus: {
			// 被绑定元素插入到父节点时调用 , el是原生的DOM元素
			inserted:function (el) {
				el.focus();
			}
		},
		color: {
			// 指令第一次绑定到元素时调用
			bind:function(el,binding) {
				// binding.value 指令的绑定值
				el.style.color = binding.value;
			}
		}
	},
	// 定义过滤器
	filters:{
		timeFormat(time) {
			var date = new Date(time);
			var year = date.getFullYear();
			var month = date.getMonth() + 1;
			var day = date.getDate();
			return `${year}-${month}-${day}`;
		}
	}
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>

</style>