vue input輸入框聯想
阿新 • • 發佈:2022-05-03
以下是示例,樣式可以自己修改。最後是效果圖,其實也挺簡單的,主要是用了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>
一個人如果不想輸,就要不斷學好眼前的東西,它們將來都會大有用處…