lovecoding
/
W250913


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        /* css reset */
        ul{
            margin: 0;
            padding: 0;
        }
        li{
            list-style: none;
        }

        ul li{
            display: flex;
            width: 300px;
            justify-content: space-around;
            margin:10px 0;
        }
        ul li:first-child div{
            font-weight: bold;
        }
        ul li:first-child{
            border-bottom: 3px solid black;
        }
    </style>
</head>
<body>
    <div id="app">
        <div>
            <input @input="inputHandle" type="text" v-model="searchName">
        </div>
        <ul>
            <li>
                <div>姓名</div>
                <div>性别</div>
                <div>地址</div>
            </li>
            <li v-for="item in list">
                <div>{{item.userName}}</div>
                <div>{{item.sex}}</div>
                <div>{{item.address}}</div>
            </li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        let _data = [
            { 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: '宁波市海曙区' }
        ]
        new Vue({
            el:"#app",
            data:{
               list: _data,
               searchName:""
            },
            methods:{
                inputHandle(){
                    // console.log(this.searchName);
                    let newList = _data.filter((item)=>{
                        if(item.userName.includes(this.searchName)){
                            return true
                        }
                    })
                    this.list = newList
                }
            }
        })
    </script>
</body>
</html>