js实现搜索显示列表

最新推荐文章于 2023-07-11 21:23:47 发布

文i

最新推荐文章于 2023-07-11 21:23:47 发布

阅读量1.7k

点赞数

文章标签： html html5 vue.js javascript css

本文链接：https://blog.csdn.net/weixin_44955769/article/details/114592154

版权

现有这一需求，有一列表，一个搜索框，要求列表根据搜索框内容显示，效果如下

话不多说看图

在这里插入图片描述
代码如下

实现思路：
父组件是搜索框传给子组件列表需要显示的内容
子组件遍历列表通过computed 计算属性来拿到处理后的数据
用到的方法有 str.toLowerCase() 转化为小写, indexOf()根据字符串判断拿到索引，有索引返回索引，没有返回-1

<template>
  <div class="eub-wrap">
    <!-- 最下面三条信息 -->
    <div class="eub-msg">
      <div @click="dianji(index)" v-for="(item, index) in selectCoins" :key="index" class="eub-con1">
        <div class="eub-con1-left">
          <div class="eub-con1-left-icon2">
            <img :src="item.icon" alt="" />
          </div>
          <div class="eub-con1-left-con2">
            <div class="eth">{{item.coin}}</div>
            <div class="ether">{{item.chain}}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import ETH from '@/assets/img/icon-ETH.png'
import USDT from '@/assets/img/icon-USDT.png'
import WBTC from '@/assets/img/icon-WBTC.png'
import UNI from '@/assets/img/UNI.png'
import HT from '@/assets/img/HT.png'
import HFIL from '@/assets/img/HFIL.png'
import HUSD from '@/assets/img/HUSD.png'
import DepositMask from './deposit-mask'
export default {
  name: 'Euw',
  components: {
    DepositMask
  },
  props: ['searchTxt'],
  computed: {
    selectCoins () {
      return this.coins.filter(item => {
        // console.log(item.coin.toLowerCase(), 111111, item.coin.toLowerCase().indexOf(this.searchTxt.toLowerCase()) !== -1)
        return item.coin.toLowerCase().indexOf(this.searchTxt.toLowerCase()) !== -1
      })
    }
  },
  data () {
    return {
      swapDepositeth: {
        src: ETH
      },
      swapDepositustd: {
        src: USDT
      },
      swapDepositwbtc: {
        src: WBTC
      },
      coins: [{
        coin: 'ETH',
        chain: 'Ether',
        icon: ETH,
        yieldper: '$1,000',
        apy: '148.5%',
        tokesday: '1.879'
      }, {
        coin: 'USDT',
        chain: 'Tether USD',
        icon: USDT,
        yieldper: '$1,000',
        apy: '148.5%',
        tokesday: '1.879'
      }, {
        coin: 'WBTC',
        chain: 'Wrapper BTC',
        icon: WBTC,
        yieldper: '$1,000',
        apy: '148.5%',
        tokesday: '1.879'
      }, {
        coin: 'UNI',
        chain: 'Uniswap',
        icon: UNI,
        yieldper: '$1,000',
        apy: '148.5%',
        tokesday: '1.879'
      }, {
        coin: 'HT',
        chain: 'Huobi HT',
        icon: HT,
        yieldper: '$1,000',
        apy: '148.5%',
        tokesday: '1.879'
      }, {
        coin: 'HFIL',
        chain: 'Huobi FIL',
        icon: HFIL,
        yieldper: '$1,000',
        apy: '148.5%',
        tokesday: '1.879'
      }, {
        coin: 'HUSD',
        chain: 'HUSD',
        icon: HUSD,
        yieldper: '$1,000',
        apy: '148.5%',
        tokesday: '1.879'
      }]
    }
  },
  methods: {
    dianji (index) {
      this.$refs.dialogMask.setCoin(this.coins[index])
      this.$refs.dialogMask.showDialog()
    }
  }
}
</script>