admin

9_vue/练习4_商品列表.html

@@ -19,6 +19,9 @@
         .add-box {
             width: 600px;
         }
+        .active{
+            background-color: #ddd;
+        }
     </style>
 </head>
 
@@ -32,20 +35,20 @@
             </nav>
             <div class="row search-box my-3">
                 <div class="col-8">
-                    <input type="text" class="form-control" placeholder="请输入商品名称" aria-label="First name">
+                    <input v-model="searchName" type="text" class="form-control" placeholder="请输入商品名称" aria-label="First name">
                 </div>
                 <div class="col-4">
-                    <button type="button" class="form-control btn btn-primary">搜索</button>
+                    <button @click="searchFun" type="button" class="form-control btn btn-primary">搜索</button>
                 </div>
             </div>
             <div class="input-group mb-3 add-box">
-                <input type="text" class="form-control" placeholder="请输入商品名称" aria-label="Recipient's username"
+                <input v-model="goodsName" type="text" class="form-control" placeholder="请输入商品名称" aria-label="Recipient's username"
                     aria-describedby="button-addon2">
 
-                <input type="text" class="form-control" placeholder="请输入商品价格" aria-label="Recipient's username"
+                <input v-model="goodsPrice" type="text" class="form-control" placeholder="请输入商品价格" aria-label="Recipient's username"
                     aria-describedby="button-addon2">
 
-                <button class="btn btn-outline-secondary" type="button" id="button-addon2">添加</button>
+                <button @click="addFun" class="btn btn-outline-secondary" type="button" id="button-addon2">添加</button>
             </div>
             <table class="table">
                 <thead>
@@ -58,8 +61,8 @@
                     </tr>
                 </thead>
                 <tbody>
-                    <tr v-for="item in tableData">
-                        <th scope="row">1</th>
+                    <tr v-for="(item,index) in tableData" >
+                        <th scope="row">{{index+1}}</th>
                         <td>
                             <input type="checkbox">
                         </td>
@@ -110,7 +113,44 @@
         new Vue({
             el: '#app',
             data: {
-                tableData:_data
+                tableData:_data,
+                searchName:"",
+                goodsName:"",
+                goodsPrice:""
+            },
+            methods:{
+                // 搜索
+                searchFun(){
+                    // 过滤数组中符合条件的元素
+                    let newData = _data.filter((item)=>{
+                        if(item.name.indexOf(this.searchName)!=-1){
+                            return true
+                        }
+                    })
+                    this.tableData = newData;
+                },
+                // 添加商品
+                addFun(){
+                    // 1. 先判断商品名称和商品价格是否为空
+                    if(this.goodsName=="" || this.goodsPrice==""){
+                        console.log("请输入商品名称和商品价格")
+                        
+                    }else{
+                        let newGood = {
+                            id:_data[_data.length-1].id+1,
+                            name:this.goodsName,
+                            price:this.goodsPrice,
+                            isCheck:false
+                        }
+                        // 2. 添加商品
+                        this.tableData.push(newGood)
+                        // 3. 清空输入框
+                        this.goodsName=""
+                        this.goodsPrice=""
+                    }
+
+                    
+                }
             }
         })