[vue]移动端实现搜索定位功能

本文介绍如何在移动端利用Vue.js实现搜索框功能,通过添加ref属性绑定元素,并结合JavaScript实现列表的实时搜索定位。
摘要由CSDN通过智能技术生成

搜索框

 <div class="sticky">
     <van-cell-group class="search">
       <van-field v-model="input" placeholder="请输入搜索关键字">
         <template #right-icon>
           <van-icon name="search" @click="search"/>
         </template>
       </van-field>
     </van-cell-group>
   </div>

循环的列表

 <DeviceCell
              v-for="(item, index) in list"
              :key="index"
              ref="positioning"
              :diyi="item.diyi"
              :dier="item.dier"
              :disan="item.disan"
              :disi="item.disi"
              :diwu="item.diwu"
              :diliu="item.diliu"
             />

注意 此处一定不要忘记加 ref


                
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值