无敌搜索框

最新推荐文章于 2024-05-21 12:31:25 发布

翘板

最新推荐文章于 2024-05-21 12:31:25 发布

阅读量84

点赞数

分类专栏：搜索框文章标签： elementui vue.js 前端

本文链接：https://blog.csdn.net/m0_61950846/article/details/124501513

版权

搜索框专栏收录该内容

1 篇文章 0 订阅

订阅专栏

对象的情况下用这种方法

       <div id="box">
        <input type="text" v-model="myText">
        <!-- 用名字检索 -->
        <div v-for="site in list" v-if="site.name.indexOf(myText)!=-1">
            <!-- indexOf检索!字符串!是否出现，没有检索到就返回-1 -->
            <!-- v-if 如果是true就显示  // false就是隐藏 -->
            <!-- 如果项名字和价格一起检索的话用 || 或-->
            <!-- v-if="site.price.indexOf(myText)!=-1 || site.name.indexOf(myText)!=-1" -->
            {{site.name}}
            {{site.price}}
       </div>

js------------------------
 data:{
     list:[
         {name:'aa',price:'100'},
         {name:'bb',price:'200'},
         {name:'cc',price:'300'}
     ],
     myText:'',
  },

字符串的情况下   用这种方法

<div id="box">
        <input type="text" v-model="myText">
        <p v-for="data in getDataList">{{data}}</p>
</div>

js========================
 data: {
    myText: "",
    dataList: ['奔驰', '宝马', '宾利', '法拉利'],
 },
        computed: {
            getDataList() {
                return this.dataList.filter(item => item.indexOf(this.myText) > -1)
            }
        },