|
|
@@ -0,0 +1,118 @@
|
|
|
+<!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>
|
