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 条评论
登录 后参与评论

相关文章

来自专栏程序员叨叨叨

【8】如何写出一篇登得上大雅之堂的技术博客

写博客之前,一定要在心里好好地问自己:我为什么要写博客?我记得自己初入简书是受学长李响同學引导,因其奇佳的段子手天赋引来了诸多粉丝,尤其是《李响同學 #你的包里...

471
来自专栏宋凯伦的技术小栈

Active Sync与IIS7 Classic&Integrated模式,Exchange 2007&2010的关系

上周开始一项工作,起因是因为QA同事发现我们开发的EAS hook不能在Exchange 2007 server上工作,而在Exchange 2010上可以正...

18110
来自专栏理论坞

那些你不知道的Photoshop冷知识⑤——CC2015评测专题

笔者在探索新版本时,首先注意的便是首选项的变化,可以发现这次更新之后首选项侧边栏多了不少东西,点进去之后才发现原来是进行了重新分类,那么有哪些好玩的功能呢?介绍...

724
来自专栏Android先生

如何写出一篇登得上大雅之堂的技术博客

本文原标题为:【Mac流派】程序猿修炼之道(7)-技能篇之如何写出一篇登得上大雅之堂的技术博客,后因标题如古时女人的裹脚布——又臭又长,遂改为:...

693
来自专栏阮一峰的网络日志

React 技术栈系列教程

上周中秋节,我待在家里,写完了 Redux 教程。 至此,《React 技术栈系列教程》算是比较完整了。 ? ES6 语法:教程 Babel:教程 Reac...

3165
来自专栏知晓程序

你的微信输入速度超过全国 99.9% 的好友 | 晓技巧

895
来自专栏知晓程序

微信,我小鸡忍你很久了…… | 开发

1575
来自专栏跟着阿笨一起玩NET

WEB免费打印控件推荐

要么购买成熟的打印控件,如果是大项目可以考虑,但如果项目只有几K到1、2W之间,这就麻烦了。

231
来自专栏视频加密

关于微信小程序播放视频加密技术的解答

现在小程序应用越来越广泛,视频播放加密功能需求也越来越多,很多人咨询小程序播放视频可不可以保护视频不被盗用呢?小编掌握的加密技术目前能实现在线视频加密、离线视频...

1133
来自专栏Android 开发者

[译] 通过安全浏览保护 WebView

1496

扫描关注云+社区