Vue学生管理案例,v-for、v-model数据双向绑定
示图:
代码:
<template> <div class="home"> <h1>主页</h1> <table border="1" cellpadding="0" cellspacing="0"> <tbody> <tr> <td>id</td> <td>姓名</td> <td>时间</td> <td>操作</td> </tr> <tr v-for="(item,index) in search(keywords)" :key="index"> <td>{{item.id}}</td> <td>{{item.name}}</td> <td>{{item.time}}</td> <td><a @click.prevent="del(index)">删除</a></td> </tr> <tr> <td><input type="text" v-model="id" placeholder="请输入学生id"></td> <td><input type="text" v-model="name" placeholder="请输入学生姓名"></td> <td><input type="text" v-model="keywords" placeholder="请输入搜索姓名"></td> <td><input type="button" @click="add" value="新增"></td> </tr> </tbody> </table> </div> </template> <script> export default { name: 'Home', data(){ return{ list:[ {id:1,name:'小刚',time:new Date()}, {id:2,name:'王强',time:new Date()}, {id:3,name:'李岚',time:new Date()}, ], id:'', name:'', keywords:'', //搜索姓名 } }, methods: { //添加学生信息 add(){ let stu={ id:this.id, name:this.name, time:new Date() } this.list.push(stu) //重置输入框 this.id=this.name='' }, //删除学生信息 del(index){ this.list.splice(index,1) }, //搜索学生信息 search(keywords){ let newList = []; this.list.forEach(item=>{ if(item.name.indexOf(keywords)!=-1){ newList.push(item) } }) return newList; } }, } </script> <style scoped> table{ font-size: 20px; text-align: center; cursor: default; } table a:hover{ color:red; } </style>
文章评论