Auto Commit

src/App.vue

-<script setup>
-import HelloWorld from './components/HelloWorld.vue'
-import TheWelcome from './components/TheWelcome.vue'
-</script>
-
 <template>
-  <header>
-    <img alt="Vue logo" class="logo" src="./assets/logo.svg" width="125" height="125" />
-
-    <div class="wrapper">
-      <HelloWorld msg="You did it!" />
-    </div>
-  </header>
-
-  <main>
-    <TheWelcome />
-  </main>
+  <div id="app">
+    <input type="text" placeholder="请输入id" v-model="id">
+    <input type="text" placeholder="请输入姓名" v-model="name">
+    <input type="text" placeholder="请输入年龄" v-model="age">
+    <input type="text" placeholder="查询" v-model="keywords">
+    <button @click="add">添加</button>
+    <hr />
+    <!--列表-->
+    <ul>
+      <li v-for="(item, index) in search(keywords)" :key="item.id">
+        {{ item.id }}--{{ item.name }}--{{ item.age }}
+        <button @click="del(index)">删除</button>
+      </li>
+    </ul>
+  </div>
 </template>
 
-<style scoped>
-header {
-  line-height: 1.5;
-}
-
-.logo {
-  display: block;
-  margin: 0 auto 2rem;
-}
-
-@media (min-width: 1024px) {
-  header {
-    display: flex;
-    place-items: center;
-    padding-right: calc(var(--section-gap) / 2);
-  }
+<script>
 
-  .logo {
-    margin: 0 2rem 0 0;
-  }
+export default {
+  name: 'App',
+  data() {
+    return {
+      id: '',
+      name: '',
+      age: '',
+      keywords: '',
+      list: [
+        {
+          id: 1,
+          name: '张三',
+          age: 18
+        },
+        {
+          id: 2,
+          name: '李四',
+          age: 18
+        },
+        {
+          id: 3,
+          name: '王五',
+          age: 18
+        }
+      ]
+    }
+  },
+  methods: {
+    add() {
+      if (this.id && this.name && this.age != '') {
+        let msg = { id: this.id, name: this.name, age: this.age };
+        this.list.push(msg);
+        this.id = this.name = this.age = '';
+      }
 
-  header .wrapper {
-    display: flex;
-    place-items: flex-start;
-    flex-wrap: wrap;
+    },
+    del(index) {
+      //findIndex() 方法返回传入一个测试条件（函数）符合条件的数组第一个元素位置
+      /*let index = this.list.findIndex(item => {
+        if (item.id == this.id) {
+          return true
+        }
+      })*/
+      this.list.splice(index, 1)
+    },
+    search(keywords) {
+      //filter() , 筛选符合项，并且返回新的数组
+      return this.list.filter(item => {
+        //item就是list
+        //includes() 方法用于判断字符串是否包含指定的子字符串。
+        //如果找到匹配的字符串则返回 true，否则返回 false。
+        if (item.name.includes(keywords)) {
+          //哪个包含关键词就返回哪个
+          return item
+        }
+      })
+    }
   }
 }
-</style>
+</script>
+
+<style></style>
\ No newline at end of file