vue 微信小程序 , 简单版 输入框内带模糊搜索功能

        <u-form-item label="楼层" required>
          <!-- <u-input v-model="formItem.floor" @click="floorShow = true" type="select" /> -->
          <u-input v-model="formItem.floor" type="text" />
          <view>
            <view v-for="item in floorInfos" :key="item" v-show="formItem.floor !=''" @click="chooseFloor(item)">
              <view v-show="showf">{{item}}</view>
            </view>
          </view>
        </u-form-item>

export default {
  data () {
    return {
      floorInfoo:[
                     "苹果","沙果","海棠","野樱莓","枇杷","欧楂","山楂","香梨",
                     "雪梨 ","温柏","蔷薇果","花楸","杏","樱桃","桃","水蜜桃",
                     "油桃","蟠桃","李子","梅子","西梅","白玉樱桃 ","黑莓",
                     "覆盆子","云莓","罗甘莓","白里叶莓","草莓","菠萝莓","橘子",
                     "砂糖桔","橙子","柠檬","青柠","柚子","金桔","葡萄柚","香橼",
                     "佛手","指橙","黄皮果","哈密瓜","香瓜","白兰瓜","刺角瓜"
                ], 
      showf:true

    }
  },

  computed: {
    floorInfos () {  
      let keyword=this.formItem.floor
      if(keyword==''){
        this.showf=true
      }
       return this.floorInfoo.filter((item) => {
          return  item.includes(keyword)
        })  
    }

  },
  methods:{
  chooseFloor(item){   
     this.formItem.floor=item  
     this.showf=false
    },
  }