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

相关文章

来自专栏企鹅号快讯

你的密码被破解了?看看你的Apple ID、邮箱密码是不是这些!

今天小沃本来想买元旦的车票来着,结果发现密码忘了,在输入两次错误以后,为了防止账户冻结选择了重新设置密码。卖票的 App 还不让设置太简单的密码,本来还想吐槽整...

2786
来自专栏企鹅号快讯

黑客术语基础知识快速了解

1.肉鸡:所谓“肉鸡”是一种很形象的比方,比方那些能够随意被我们操控的电脑,对方可所以Windows体系,也可所以UNIX/Linux体系,可所以一般的个人电脑...

27310
来自专栏二次元

萌音云笔记平台

另外,由于博主剩下的时间不多了,很多计划中的功能便割舍了.....无奈╮(╯▽╰)╭ 好吧,一般我不喜欢介绍项目功能,你们自个发掘吧! 这可能是今年...

881
来自专栏FreeBuf

漏洞预警:厄运cookie(Misfortune Cookie)漏洞影响全球1200万台路由器

一个名为“厄运cookie(Misfortune Cookie)”的严重漏洞正在影响全球1200万台路由器安全,D-Link、 TP-Link、华为、中兴等品牌...

1757
来自专栏微信小开发

2.认证小程序

步骤一 小程序认证费是300元/年,腾讯直接收取费用。点击“申请微信认证”。 ? 步骤二 验证管理者身份。输入手机号码,获取验证码。 ? ? 步骤三 勾选同意协...

2658
来自专栏FreeBuf

从安全漏洞看印度国家银行APP为何“技术落后10年”

2007年的时候,我在印度最大的国有银行中的一家注册了一个账号,这个国家的银行(政府或者民营)普遍所使用的技术与当前水平相比至少落后了10年。 2015年末,我...

1887
来自专栏SAP最佳业务实践

想学FM系列(3)-SAP FM模块:主数据(1)

3、主数据 在FM当中主数据主要分成了两类:一类是账户分配要素,另一类是预算结构用到的地址(如预算地址、记账地址)。 3.1 账户分配要素-主数据 根据PSM及...

3958
来自专栏开源项目

Git 项目推荐 | 基于 Tiny Core 的 Linux 系统

百晓通Linux系统,DIY自Tiny Core的一款迷你Linux系统。 百晓通Linux,DIY自 Tiny Core Linux(非常感谢**TC**的开...

33911
来自专栏数据和云

DBA生存警示:主备环境误操作案例及防范建议

编辑手记:对于资深的老DBA们,他们在漫长的职业生涯中养成了很多稀奇古怪的守则,以在复杂多变的环境中“幸存”,这源于无数血泪的教训,我曾经在《数据安全警示录》...

3387
来自专栏FreeBuf

SYNPROXY:最廉价的抗DoS攻击方案

对于防御Dos攻击来说,我这辈子都不一定能见到完美的解决方案。虽然,有成吨的商用防火墙,可以有效的防御Dos攻击,但是他们都太贵了。作为一个学术型人才,我倾向于...

2438

扫码关注云+社区