lovecoding
/
Web1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!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>
        table {
            border-collapse: collapse;
        }

        /* table td{
            border: 1px solid black;
        } */
        td {
            width: 120px;
            text-align: center;
            height: 30px;
        }

        thead tr th {
            border-bottom: 2px solid black;
        }
    </style>
</head>

<body>
    <div id="app">
        <div class="inp-content">
            <input type="text" v-model="inpVal">
        </div>
        <table>
            <thead>
                <tr>
                    <th>姓名</th>
                    <th>性别</th>
                    <th>地址</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in dataList" v-show="item.userName.includes(inpVal)">
                    <td>{{item.userName}}</td>
                    <td>{{item.sex}}</td>
                    <td>{{item.address}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <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: '宁波市海曙区' }
        ]
        var app = new Vue({
            el: '#app',
            data: {
                inpVal: '',
                dataList: [
                    { 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: '宁波市海曙区' }
                ]
            },
            created:function() {
                let obj = {
                    val:this.dataList
                };
                let val = JSON.stringify(obj);
                localStorage.setItem("_dataList", val);
            },
            watch: {
                inpVal: function (val) {
                    let _val = localStorage.getItem("_dataList");
                    let obj = JSON.parse(_val).val;
                    let filterArr = obj.filter((item)=>{
                        if(item.userName.includes(val)){
                            return true;
                        }
                    })
                    this.dataList = filterArr;
                }
                // inpVal: function (val) {
                //     let filterArr = _data.filter((item) => {
                //         if (item.userName.includes(val)) {
                //             return true;
                //         }
                //     })
                //     // console.log(filterArr);
                //     this.dataList = filterArr;
                // }
            }
        })
    </script>
</body>

</html>