|
|
@@ -1,12 +1,133 @@
|
|
|
<!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>
|
|
|
+ <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>
|
