lovecoding
/
W260426


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118
							<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        #app{
            width: 500px;
        }
        .list-heade{
            display: flex;
            border-bottom: 3px solid #333;
        }
        .list-heade div{
            width: 120px;
            margin:10px;
            text-align: center;
            color: #111;
        }
        .list-item{
            display: flex;
        }
        .list-item div{
            width: 120px;
            margin:10px;
            text-align: center;
            color: #222;
        }
    </style>
</head>

<body>
    <div id="app">
        <input type="text" placeholder="请输入姓名" v-model="searchName" v-on:input="filterList">
        <div class="list-heade">
            <div>姓名</div>
            <div>性别</div>
            <div>地址</div>
        </div>
        <!-- <div class="list-item" v-for="item in list" :key="item.id" v-if="item.userName.includes(searchName)"> -->
        <div class="list-item" v-for="item in list" :key="item.id" >

            <div>{{item.userName}}</div>
            <div>{{item.sex}}</div>
            <div>{{item.address}}</div>
        </div>
    </div>
    <script>
        new Vue({
            el: '#app',
            data: {
                searchName:"",
                list: [
                    { id: 1, userName: '李雷', sex: '男', address: '北京市朝阳区' },
                    { id: 2, userName: '韩梅梅', sex: '女', address: '上海市浦东新区' },
                    { id: 3, userName: '李华', sex: '男', address: '广州市天河区' },
                    { id: 4, userName: '王芳', sex: '女', address: '深圳市南山区' },
                    { id: 5, userName: '张伟', sex: '男', address: '成都市武侯区' },
                    { id: 6, userName: '李娜', sex: '女', address: '重庆市渝中区' },
                    { id: 7, userName: '王磊', sex: '男', address: '杭州市西湖区' },
                    { id: 8, userName: '刘洋', sex: '女', address: '南京市玄武区' },
                    { id: 9, userName: '李强', sex: '男', address: '武汉市江汉区' },
                    { id: 10, userName: '王静', sex: '女', address: '西安市雁塔区' },
                    { id: 11, userName: '赵雷', sex: '男', address: '天津市河西区' },
                    { id: 12, userName: '孙娜', sex: '女', address: '长沙市芙蓉区' },
                    { id: 13, userName: '李敏', sex: '男', address: '沈阳市沈河区' },
                    { id: 14, userName: '王磊', sex: '女', address: '青岛市市南区' },
                    { id: 15, userName: '张强', sex: '男', address: '合肥市庐阳区' },
                    { id: 16, userName: '刘洋', sex: '女', address: '南昌市东湖区' },
                    { id: 17, userName: '李华', sex: '男', address: '厦门市思明区' },
                    { id: 18, userName: '王静', sex: '女', address: '福州市鼓楼区' },
                    { id: 19, userName: '赵雷', sex: '男', address: '大连市中山区' },
                    { id: 20, userName: '孙娜', sex: '女', address: '宁波市海曙区' }
                ],
                originList: [{ id: 1, userName: '李雷', sex: '男', address: '北京市朝阳区' },
                    { id: 2, userName: '韩梅梅', sex: '女', address: '上海市浦东新区' },
                    { id: 3, userName: '李华', sex: '男', address: '广州市天河区' },
                    { id: 4, userName: '王芳', sex: '女', address: '深圳市南山区' },
                    { id: 5, userName: '张伟', sex: '男', address: '成都市武侯区' },
                    { id: 6, userName: '李娜', sex: '女', address: '重庆市渝中区' },
                    { id: 7, userName: '王磊', sex: '男', address: '杭州市西湖区' },
                    { id: 8, userName: '刘洋', sex: '女', address: '南京市玄武区' },
                    { id: 9, userName: '李强', sex: '男', address: '武汉市江汉区' },
                    { id: 10, userName: '王静', sex: '女', address: '西安市雁塔区' },
                    { id: 11, userName: '赵雷', sex: '男', address: '天津市河西区' },
                    { id: 12, userName: '孙娜', sex: '女', address: '长沙市芙蓉区' },
                    { id: 13, userName: '李敏', sex: '男', address: '沈阳市沈河区' },
                    { id: 14, userName: '王磊', sex: '女', address: '青岛市市南区' },
                    { id: 15, userName: '张强', sex: '男', address: '合肥市庐阳区' },
                    { id: 16, userName: '刘洋', sex: '女', address: '南昌市东湖区' },
                    { id: 17, userName: '李华', sex: '男', address: '厦门市思明区' },
                    { id: 18, userName: '王静', sex: '女', address: '福州市鼓楼区' },
                    { id: 19, userName: '赵雷', sex: '男', address: '大连市中山区' },
                    { id: 20, userName: '孙娜', sex: '女', address: '宁波市海曙区' }
                ]
            },
            methods:{
                filterList(){
                    let newList = this.originList.filter((val)=>{
                        // console.log(val.userName);
                        // console.log(this.searchName);
                        if(val.userName.includes(this.searchName)){
                        //    console.log(val);
                           return true;
                        }   
                    })
                    // console.log(newList);
                    this.list = newList;
                }
            }
        })
    </script>
</body>

</html>