思路分析：1.v-mode 双向绑定输入的内容 @change="Search"方法
2.data(){retuen{keywords:'',//定义搜索的文字}}
3.将获取到的keywords提交到后台调用搜索方法
废话不多说上截图
1 <template> 2 <div> 3 <div class="main"> 4 <!-- 头部返回标签搜索框 --> 5 <div class="header"> 6 <i @click='back' class="el-icon-back"></i> 7 <input type="search" placeholder="华为nove 5z" 8 @change="onSearch" 9 v-model="keywords" 10 > 11 </div> 12 <!-- 店铺信息粉丝量关注 --> 13 <div class="shop"> 14 <h2>华为自营官方旗舰店</h2> 15 <div class="ziyi"> 16 <li><span class="business">自营</span><span style="color:#fff;">粉丝数量247万</span></li> 17 <li class="follow"><i class="el-icon-star-off"></i>关注</li> 18 </div> 19 </div> 20 <!-- tab滑动 --> 21 <div class="header_tab"> 22 <van-tabs v-model="active"> 23 <van-tab title="手机" style="flex-basis: 12%;"> 24 <!--价格销量筛选 --> 25 <div class="price"> 26 <ul> 27 <li>价格</li> 28 <li>销量</li> 29 <li>筛选</li> 30 </ul> 31 </div> 32 <!-- 商品信息渲染 --> 33 <ul class="box"> 34 <li v-for="(item,index) in goodsList" :key="index"> 35 <p class="commodity_i"><img :src="item.picUrl" alt="商品照片"></p> 36 <p class="commodity_name">{{item.name}}</p> 37 <!-- <p class="size"> 38 <span>6.26英寸</span>| 39 <span>超长待机</span>| 40 <span>128GB</span> 41 </p> --> 42 <p class="commodity_price">¥<span>{{item.counterPrice}}</span>/天限时价</p> 43 <p class="all"> 44 <span class="new">全新</span> 45 <span class="free">免押金</span> 46 <span class="gift">赠</span> 47 </p> 48 <p class="people"> 49 <span>52.7万</span>人付款 50 <span>99%</span>好评 51 </p> 52 </li> 53 54 </ul> 55 </van-tab> 56 <van-tab title="游戏机" style="flex-basis: 12%;"> 57 58 </van-tab> 59 <van-tab title="电脑" style="flex-basis: 12%;"> 60 <!--价格销量筛选 --> 61 <div class="price"> 62 <ul> 63 <li>价格</li> 64 <li>销量</li> 65 <li>筛选</li> 66 </ul> 67 </div> 68 <!-- 商品信息渲染 --> 69 <ul class="box"> 70 <li> 71 <!-- <p class="commodity_i"><img src="../assets/image/phone.png" alt="商品照片"></p> --> 72 <p class="commodity_name">Apple iPhone X</p> 73 <!-- <p class="size"> 74 <span>6.26英寸</span>| 75 <span>超长待机</span>| 76 <span>128GB</span> 77 </p> --> 78 <p class="commodity_price">¥<span>9.99</span>/天限时价</p> 79 <p class="all"> 80 <span class="new">全新</span> 81 <span class="free">免押金</span> 82 <span class="gift">赠</span> 83 </p> 84 <p class="people"> 85 <span>52.7万</span>人付款 86 <span>99%</span>好评 87 </p> 88 </li> 89 </ul> 90 </van-tab> 91 <van-tab title="相机" style="flex-basis: 12%;">内容 4</van-tab> 92 <van-tab title="办公用品" style="flex-basis: 12%;"></van-tab> 93 </van-tabs> 94 </div> 95 </div> 96 97 </div> 98 99 </template> 100 101 <script> 102 export default { 103 data(){ 104 return{ 105 goodsList:[], 106 // search:'', 107 keywords:'' 108 } 109 }, 110 methods:{ 111 //返回上一级目录 112 back(){ 113 this.$router.go(-1) 114 }, 115 //商品数据 116 getgoodsList(){ 117 this.$axios.get("http://192.168.0.18:8080/wx/goods/list",{params:{ 118 keyword:this.keywords 119 }}) 120 .then(res=>{ 121 console.log(res.data.data.list); 122 this.goodsList=res.data.data.list; 123 console.log(this.goodsList); 124 }) 125 }, 126 onSearch(){ 127 //获取到的值 128 let keyword=this.keywords; 129 this.$axios.get("http://192.168.0.18:8080/wx/goods/list",{params:{ 130 keyword:this.keywords 131 }}) 132 .then(res=>{ 133 console.log(res.data.data.list); 134 this.goodsList=res.data.data.list; 135 console.log(this.goodsList); 136 }) 137 138 } 139 140 141 }, 142 //tab点击 143 mounted(){ 144 document.onclick=function(e){ 145 var smallDay=document.querySelector('.small-day'); 146 var middleDay=document.querySelector('.middle-day'); 147 var largeDay=document.querySelector('.large-day'); 148 var event=e||event; 149 var target=event.targrt||event.srcElement; 150 if(target.className==='small-day'){ 151 target.style.backgroundColor="#C7E8FF"; 152 target.style.color="#1385FF"; 153 middleDay.style.backgroundColor="#F5F6FA"; 154 middleDay.style.color='black'; 155 largeDay.style.backgroundColor="#F5F6FA"; 156 largeDay.style.color='black'; 157 } 158 if(target.className==='middle-day'){ 159 target.style.backgroundColor="#C7E8FF"; 160 target.style.color="#1385FF"; 161 smallDay.style.backgroundColor="#F5F6FA"; 162 smallDay.style.color='black'; 163 largeDay.style.backgroundColor="#F5F6FA"; 164 largeDay.style.color='black'; 165 } 166 if(target.className==='large-day'){ 167 target.style.backgroundColor="#C7E8FF"; 168 target.style.color="#1385FF"; 169 middleDay.style.backgroundColor="#F5F6FA"; 170 middleDay.style.color='black'; 171 smallDay.style.backgroundColor="#F5F6FA"; 172 smallDay.style.color='black'; 173 } 174 } 175 }, 176 created(){ 177 this.getgoodsList(); 178 } 179 180 181 182 } 183 </script> 184 185 <style scoped> 186 li{ 187 list-style: none; 188 } 189 .main{ 190 background-image: url("../assets/image/main_bng.png") ; 191 background-color: #F8F9FB; 192 background-repeat: no-repeat; 193 background-position: -0.5rem -0.1rem; 194 background-size: 5.0rem 5.0rem; 195 } 196 .header{ 197 padding: 0.15rem; 198 } 199 .header i{ 200 font-size: 0.26rem; 201 } 202 .header input{ 203 border-radius: 2rem; 204 79%; 205 color:#000000; 206 line-height: 0.28rem; 207 padding-left: 0.2rem; 208 margin-top: 0.1rem; 209 margin-left: 0.2rem; 210 } 211 .shop{ 212 padding: 0.1rem; 213 padding-left: 0.26rem; 214 padding-right: 0.2rem; 215 } 216 .shop h2{ 217 color:#fff; 218 font-size: 0.16rem; 219 font-weight: 500; 220 } 221 .ziyi{ 222 margin-top: 0.1rem; 223 display: flex; 224 justify-content: space-between; 225 } 226 .business{ 227 color:#EB5516; 228 border-radius: 0.1rem; 229 border:1px solid #ED9636; 230 font-size: 0.13rem; 231 background-color: #fff; 232 padding: 0.01rem; 233 padding-left: 0.03rem; 234 padding-right: 0.03rem; 235 } 236 .follow{ 237 color:#fff; 238 border-radius: 0.1rem; 239 border:1px solid #fff; 240 font-size: 0.13rem; 241 background-color: #7A7A7A; 242 padding: 0.01rem; 243 padding-left: 0.03rem; 244 padding-right: 0.03rem; 245 } 246 247 /*tab 点击 样式*/ 248 .van-tabs /deep/ .van-tabs__line { 249 position: absolute; 250 0.2rem !important; 251 bottom: 0.15rem; 252 left: 0; 253 z-index: 1; 254 height: 0.03rem; 255 background-color: #f44; 256 border-radius: 0.03rem; 257 background: -webkit-linear-gradient(to left, #fff, #fff) !important; 258 background: -o-linear-gradient(to left, #fff, #fff) !important; 259 background: -moz-linear-gradient(to left, #fff, #fff) !important; 260 background: linear-gradient(to left, #fff, #fff) !important; 261 } 262 .van-tabs /deep/ .van-tabs__wrap{ 263 margin-left: 0; 264 100%; 265 } 266 .van-tabs /deep/ .van-tabs__nav{ 267 background:rgba(0,0,0,.01); 268 } 269 .van-tabs /deep/ [class*=van-hairline]::after{ 270 border:1px solid rgba(0,0,0,.01); 271 } 272 .van-tabs /deep/ .van-tab--active { 273 color: #fff; 274 font-weight: 500; 275 } 276 .van-tabs /deep/ .van-tab{ 277 color: #fff; 278 flex-basis: 20% !important; 279 } 280 /* 价格销量筛选 */ 281 .price ul{ 282 display: flex; 283 justify-content: space-around; 284 } 285 .price ul li{ 286 color:#5E6165; 287 font-size: 0.14rem; 288 padding-top: 0.1rem; 289 } 290 /*商品信息渲染*/ 291 .ii li{ 292 margin-top: 30px; 293 } 294 .box{ 295 100%; 296 overflow: hidden; 297 } 298 .box li{ 299 1.6rem; 300 overflow: hidden; 301 overflow: auto; 302 border-radius: 0.2rem; 303 float:left; 304 border:1px solid #ccc; 305 margin-top: 20px; 306 margin-left: 20px; 307 background-color: #fff; 308 } 309 .commodity_i{ 310 1.3rem; 311 height: 1.4rem; 312 padding: 0.18rem; 313 } 314 .commodity_i>img{ 315 100%; 316 } 317 318 .commodity_name{ 319 font-weight: 600; 320 font-size: 0.12rem; 321 padding-top: 0.2rem; 322 padding-left: 0.12rem; 323 } 324 .size{ 325 background-color: #F2F2F2; 326 margin-top: 0.1rem; 327 margin-left: 0.06rem; 328 margin-right: 0.06rem; 329 font-size: 0.01rem; 330 } 331 .size span{ 332 margin-left: 0.001rem; 333 } 334 .commodity_price{ 335 padding-left: 0.1rem; 336 color:#B3381D; 337 margin-top: 0.06rem; 338 } 339 .commodity_price span{ 340 font-weight:bold; 341 } 342 .all{ 343 margin-top: 0.08rem; 344 } 345 .new{ 346 background-color: #EE6226; 347 color:#fff; 348 font-size: 0.06rem; 349 padding: 0.02rem; 350 margin-left: 0.1rem; 351 } 352 .free{ 353 color:#46A8F2; 354 border:1px solid #46A8F2; 355 font-size: 0.06rem; 356 padding: 0.01rem; 357 margin-left: 0.1rem; 358 } 359 .gift{ 360 color:#F08E26; 361 border:1px solid #F08E26; 362 font-size: 0.06rem; 363 padding: 0.01rem; 364 margin-left: 0.1rem; 365 } 366 .people{ 367 margin-top: 0.1rem; 368 color:#CFCFCF; 369 font-size: 0.1rem; 370 padding-left: 0.12rem; 371 padding-bottom: 0.12rem; 372 } 373 </style>