美文网首页
vue搜索过滤、tab切换高亮显示

vue搜索过滤、tab切换高亮显示

作者: 领家的小猫 | 来源:发表于2017-04-13 10:24 被阅读990次

    vue项目中常用的方法
    关键词: vue2.0,搜索过滤,tab切换高亮显示

    
    # 搜索过滤
    
    <input type="text" v-model="searchkey"/>
    <ul>
        <li v-for="item in searchData"></li>
    </ul>
    
    export default {
      data () {
        return {
          searchkey: '',
          flowItem: []
        }
      },
      computed: {
        searchData () {
          let that = this
          return that.flowItem.filter(function (item) {
            return String(item.name).toLowerCase().indexOf(String(that.searchKey).toLowerCase()) !== -1
          })
        }
      }
    }
    
    
    
    # tab切换class高亮显示
    
    在data中增加一个iscur变量
    
    data: {
        iscur:1,
        data:[]
    }
    <li v-for='(item, index) in data' v-text="item.name" :class="{cur:iscur===index}" @click="iscur=index"></li>
    

    相关文章

      网友评论

          本文标题:vue搜索过滤、tab切换高亮显示

          本文链接:https://www.haomeiwen.com/subject/gfxbattx.html