欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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>

 

相关标签: vue2.0