admin

11_Vue基础/练习4_列表管理.html

@@ -34,10 +34,10 @@
             <!-- 搜索框 -->
             <div class="row">
                 <div class="col-2">
-                    <input type="text" class="form-control" placeholder="请输入搜索名称">
+                    <input v-model="searchInp" type="text" class="form-control" placeholder="请输入搜索名称">
                 </div>
                 <div class="col-10">
-                    <button type="button" class="btn btn-primary">搜索</button>
+                    <button @click="searchFun" type="button" class="btn btn-primary">搜索</button>
                 </div>
             </div>
             <!-- 添加商品 -->
@@ -89,6 +89,7 @@
         let app = new Vue({
             el: "#app",
             data: {
+                searchInp: "",
                 dataList: [
                     {
                         id: 1001,
@@ -142,6 +143,16 @@
                         }
                     })
                     this.dataList = newDataList;
+                },
+                // 搜索
+                searchFun(){
+                    let searchVal = this.searchInp;
+                    let newDataList = this.dataList.filter((val)=>{
+                        if(val.name.includes(searchVal)){
+                            return true
+                        }
+                    });
+                    this.dataList = newDataList;
                 }
             },
             computed: {