首页
   /       /   
Vue实现搜索小功能
12月
8
Vue实现搜索小功能
作者:大彭Sir    分类: 教学教程

vue搜索功能实现

介绍

使用vue实现数据搜索功能,因为功能简单就不过多介绍了

搜索框

<input type="text" placeholder="请输入关键词"  v-model="search"/>

数据

search:'',
videoList:[
          {
            name:'文件夹_1',
            id:1,
            file:[
                {
                  active: false,
                  id: 1,
                  name: " 测试视频",
                  url:"hs/63902e5da667f.mp4",
                },
            ]
          },
          {
          active: false,
          id: 3,
          name: " 测试视频",
          url:"http2e5da667f.mp4",
        },
      ],

使用计算属性

  computed:{
      searchList(){
        if(this.search == ''){
          return this.search
        }else{
          return this.videoList.filter(item=>{
            return item.name.includes(this.search)
          })
        }
      }
  },
本文标签:标签: VUE 计算属性 搜索
责任声明:本页信息由网友自行发布或来源于网络,真实性、合法性由发布人负责,请仔细甄别!本站只为传递信息,我们不做任何双方证明,也不承担任何法律责任。文章内容若侵犯你的权益,请联系本站删除!
转载声明:本文作者大彭Sir,如需转载请保留文章出处!原文链接请自行复制!

Theme By Brief 鄂ICP备19010459号

站长统计 sitemap

首页

分类

友链

登录