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

相关文章

来自专栏FreeBuf

Chrome漏洞可致恶意站点在用户在不知情的情况下录制音频和视频

有没有可能我们在不知情的情况下被电脑录音和录像?黑客可以从而听到你的每一通电话,看到你周围的人。 听来恐怖,但有的时候我们真的无法完全知晓我们的电脑在干什么。正...

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

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

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

4108
来自专栏FreeBuf

美国政府再次指责俄罗斯黑客攻击其关键基础设施

Cylance的研究员报道称网络攻击者在利用一个核心路由器针对一些基础设施进行攻击,美国指责这一攻击的实施者为俄罗斯。主要针对能源、核、商业设施、水、建筑、航空...

2846
来自专栏企鹅号快讯

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

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

3886
来自专栏bboysoul

使用esp8266制作wifi干扰器

这个东西,说真的对现在的无线网络环境影响其实不是很大了,首先它只能玩2.4ghz的无线,其次这个模块不是特别的可靠,运行的时候温度会很高,买来玩玩还是可以的

1063
来自专栏小文网

修改HOST文件访问Pixiv插画网站

Pixiv,是一个主要由日本艺术家所组成的虚拟社群,主体为由pixiv股份制有限公司所运营的为插画艺术特化的社交网络服务网站。新兴的日本同人画、插画作品分享站点...

4606
来自专栏FreeBuf

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

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

1897
来自专栏数据和云

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

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

3447
来自专栏企鹅号快讯

微软发布12月安全更新,修复34项安全问题

微软2017年12月发布的补丁星期二(2017年12月12日)更新解决了30多个安全漏洞,其中包括19个影响Internet Explorer和Edge网页浏览...

3488
来自专栏企鹅号快讯

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

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

31510

扫码关注云+社区