vue 添加，删除 搜索 品牌列表

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>