vue 添加,删除 搜索 品牌列表
程序员文章站
2022-05-15 22:54:21
...
html
<div id="app"> <div><input type="text" v-model="name" ><input type="button" value="添加"v-on:click="add"> 搜索:<input type="text" v-model="sousuokey" ></div> <table> <tr> <td>ID</td> <td>品牌名</td> <td>添加时间</td> <td>操作</td> </tr> <tr v-for="(item,i) in sousuo(sousuokey)" :key="item.id"> <td>{{ item.id }}</td> <td>{{ item.name }}</td> <td>{{ item.createTime }}</td> <td><input type="button" value="删除" v-on:click="del(i)"> </td> </tr> </table> </div>
js
<script> var vm = new Vue({ el:'#app', data:{ list:[ {id:1,name:'百事可乐',createTime:new Date().getFullYear()}, {id:2,name:'雪碧',createTime:new Date().getFullYear()} ], name:'', sousuokey:'' }, methods:{ add(){ this.list.push({id:this.list.length+1,name:this.name,createTime:new Date().getFullYear()}) console.log(this.name); }, del(i){ this.list.splice(i,1) }, sousuo(sousuokey){ var newlist=[] this.list.forEach(item =>{ if(item.name.indexOf(sousuokey) != -1){ newlist.push(item) } }) return newlist; } } }) </script>
用js 新方法 循环
<script> var vm = new Vue({ el:'#app', data:{ list:[ {id:1,name:'百事可乐',createTime:new Date().getFullYear()}, {id:2,name:'雪碧',createTime:new Date().getFullYear()} ], name:'', sousuokey:'' }, methods:{ add(){ this.list.push({id:this.list.length+1,name:this.name,createTime:new Date().getFullYear()}) console.log(this.name); }, del(i){ this.list.splice(i,1) }, sousuo(sousuokey){ //var newlist=[] // this.list.forEach(item =>{ // if(item.name.includes(sousuokey)){ // newlist.push(item) // } // }) // return newlist; //新方法 var newlist =this.list.filter(item=>{ if(item.name.includes(sousuokey)){ return item; } }) return newlist; } } }) </script>