以下是示例,样式可以自己修改。最后是效果图,其实也挺简单的,主要是用了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>

vue input输入框联想的更多相关文章

  1. input输入框联想功能

    一直想找一个可以连接后台,可以根据后台内容的input输入框,可以实现联想功能,网上找到一个简单的静态页面的输入框联想,经过一番修改之后终于可以实现读取自己定义的数组的联想了,其实也比较简单就是格式的 ...

  2. Vue Input输入框两侧加减框内数字组件

    NumberBox组件内容: <template> <div class="number-box" :class="{'box-disable': is ...

  3. vue input输入框长度限制

    今天在开发登录页时,需要设置登录输入框的长度,输入类型为number <input type="number" maxlength="11" placeh ...

  4. VUE -input输入框字母转大写

    示例: 输入自动转--->大写 <input type="text" placeholder="请输入证件号码" maxlength="1 ...

  5. vue 如何实现 Input 输入框模糊查询方法

    原理:原生js的indexOf() 方法,该方法将从头到尾地检索数组,看它是否含有对应的元素.开始检索的位置在数组 start 处或数组的开头(没有指定 start 参数时).如果找到一个 item, ...

  6. vue中input输入框的模糊查询实现

    最近在使用vue写webapp在,一些感觉比较有意思的分享一下. 1:input输入框: <input class="s-search-text" placeholder=& ...

  7. input输入框实现联想关键词功能

    实现原理很简单,代码如下: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> ...

  8. vue时时监听input输入框中 输入内容 写法

    Vue input 监听 使用 v-on:input="change" 实现即可 App.vue <template> <div> <md-field ...

  9. vue实现输入框的模糊查询(节流函数的应用场景)

    上一篇讲到了javascript的节流函数和防抖函数,那么我们在实际场合中该如何运用呢? 首先,我们来理解一下:节流函数首先是节流,就是节约流量.内存的损耗,旨在提升性能,在高频率频发的事件中才会用到 ...

随机推荐

  1. .NET Core 从1.1升级到2.0记录(Cookie中间件踩坑)

    .NET Core 2.0 新时代 万众瞩目的.NET Core 2.0终于发布了,原定于9.19的dotnetconf大会的发布时间大大提前了1个月,.NET Core 2.0/.NET Stand ...

  2. Nginx 负载均衡和反向代理实践

    nginx 以哪个配置文件启动 Nginx 负载均衡和反向代理实践 环境介绍 192.168.1.50    在这台主机上配置Nginx 的反向代理,负载均衡,和web1,web1使用的81号端口 1 ...

  3. 前端开发者不得不知的ES6十大特性

    前端开发者不得不知的ES6十大特性 转载 作者:AlloyTeam 链接:http://www.alloyteam.com/2016/03/es6-front-end-developers-will- ...

  4. lnmp平台搭设

    软件链接:https://pan.baidu.com/s/14gAZ67iXWhEdzvEXMiGfVg             提取码:ai1s 只是在一台服务器上搭设,为centos7.2环境 安 ...

  5. MapReducer

    MapReducer    概述        是一个分布式的计算框架(编程模型),最初由由谷歌的工程师开发,基于GFS的分布式计算框架.后来Cutting根据<Google Mapreduce ...

  6. JAVA实现QRCode的二维码生成以及打印

    喜欢的朋友可以关注下,粉丝也缺. 不说废话了直接上代码 注意使用QRCode是需要zxing的核心jar包,这里给大家提供下载地址 https://download.csdn.net/download ...

  7. Spring集成Solr搜索引擎

    1.导入jar包<dependency><groupId>org.apache.solr</groupId><artifactId>solr-solrj ...

  8. oracle expdp impdp 导入导出备份

    数据库导入导出: 使用EXPDP和IMPDP时应该注意的事项: EXP和IMP是客户端工具程序,它们既可以在客户端使用,也可以在服务端使用. EXPDP和IMPDP是服务端的工具程序,他们只能在ORA ...

  9. odoo开发笔记 -- 异常、错误、警告、提示、确认信息显示

    1.检查业务逻辑中的错误,终止代码执行,显示错误或警告信息: raise osv.except_osv(_('Error!'), _('Error Message.')) 示例代码: #删除当前销售单 ...

  10. How To Scan QRCode For UWP (2)

    这篇随笔主要介绍照相预览功能,重要使用的是MediaCapture对象,MediaCapture对象还可以用来处理录音和录制视频,本文只讨论照相功能. 1:查找摄像头 后置摄像头优先,找不到后置摄像头 ...