vue input输入框联想

以下是示例,样式可以自己修改。最后是效果图,其实也挺简单的,主要是用了watch监控input输入值的变化,如果数据是请后端请求可以,先请求数据。

<template>
  <div class="binding" v-title data-title="绑定账号">
    <div class="bindingbtn">
      <input type="text"v-model="city"/>
    </div>
    <div v-show="isshow">
      <p v-for="item in selectCitys">{{item}}</p>
    </div>
  </div>
</template>
<script>
export default {
  data () {
    return {
      isshow:true,
      city:"",
      citys:['北京','北海','东北','上海','武汉','东京','广州','广元市','上饶','上水市'],
      selectCitys:[]
    }
  },
  methods:{
    
  },
  watch:{
    city:function(val, oldVal){
      if(val.length==0){
         this.isshow = false
       }else{
          this.isshow = true;
          var citys = []
          this.citys.forEach((item,index) => {
              if(item.indexOf(val)>=0){
                  citys.unshift(item)
              }
          })  
          this.selectCitys = citys;
       }
    }
  }
}
</script>
<style scoped>
ul{
  border:1px solid red;
} 
li{
  height:40px;
  line-height: 40px;
  border-bottom: 1px solid #ddd;
}
.bindingbtn input{
  border:1px solid #333;
  height:44px;
  line-height:44px;
}
</style>

一个人如果不想输,就要不断学好眼前的东西,它们将来都会大有用处…

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏练小习的专栏

一个CSS相册 BY子鼠

代码和CSS不是最优的。有相当大的优化空间。 另外,在现实中,我想也不会有人用这个东西来作相册,我想实现的只是CSS和HTML在一起到底能作什么。 玩呗! 挑战...

1849
来自专栏GIS讲堂

Arcgis for Javascript实现两个地图的联动

今天在看天地图的时候,有一个多时相的地图显示功能,感觉很好玩,作为技术控的我晚上十点下班到家便是快十一点了,本来应该是睡觉了,但是,激动地心情不能平静,哎,算了...

672
来自专栏小白客

VIP浏览器(Android版),随时随地看VIP电影

上次给大家分享了VIP视频解析器,不过那是PC版的,没法在手机上用,今天我分享的就是手机版的VIP解析器,虽然包了一个浏览器的外壳,但并不影响它看VIP视频的本...

3928
来自专栏Data Analysis & Viz

开心二则:公众号开通原创与可视化神器RAW

今天有几件开心的小事,故简单地和大家分享下。第一则算是个小广告,就不投稿了,估计也没人会看到,应该没什么坏影响吧。

1022
来自专栏极乐技术社区

一周小程序【资讯教程Demo】更新

轻松一刻 ? 漫画来自于《程序员幽默》 官方资讯更新 小程序开放【支付宝卡包】功能 支付宝悄悄地上线了小程序的入口,并为你预装了20款不可删除的小程序 ... ...

2108
来自专栏Java学习网

写代码时你可以听听这些音乐

写代码时你可以听听这些音乐  不知道大家在写代码有没有听音乐的习惯,一般都听什么类型的音乐呢?我自己在这方面的经验不多,不过今天正好看到了一个网站专门精选推荐写...

2197
来自专栏GIS讲堂

扩展graphiclayer实现多城市天气情况的展示

在上一节,实现了点击展示城市天气的效果,在本节,讲述通过扩展graphiclayer实现同时显示多个城市天气的展示。

572
来自专栏无原型不设计

iOS界面设计,12个优秀案例激发你的灵感

总所周知,iOS和Android是当今两大移动平台,前者采用Human Interface Design,后者采用Material Design。作为设计师,尤...

2437
来自专栏逍遥剑客的游戏开发

Bullet中创建中心不在原点的碰撞体

1645
来自专栏知晓程序

小程序可以指纹识别了!我们还发现了一个更大的惊喜

这一次的新能力更新,包括设定分享卡片封面图、支持指纹识别等多种新功能,涵盖了小程序开发、运营和使用的各个方面。

852

扫码关注云+社区