Question

我必须提供超过3000课程的清单，这些课程需要进行搜索。 Here is a jsfiddle that demonstrates the basics of what I'm doing with the sample data

HTML：

<div class="container">  
<div id="filter-by-example" class="row">
  <div class="row">
    <input class="col s4" v-model="searchQuery">
</div>
    <ul class="collection col s4">
      <li class="collection-item" v-for="n in lessons| filterBy searchQuery in 'name'">
        {{ n.name }} 
        <a href="#l.id" class="secondary-content"><i class="fa fa-plus"></i></a>
      </li>
    </ul>
  </div>
</div>

JS：

var lessons = { /*Sample data*/ }    

new Vue({
  el: '#filter-by-example',
  data: {
    lessons: lessons
  }
});

在小提琴中你应该能够看到搜索时有多么滞后，这在制作中更糟糕，因为它的样式更多，并且每个列表项都有事件绑定。

我想知道如何在vue.js进行搜索时显示加载图标，如果可能的话。我环顾四周，找不到任何东西

我可以使用任何图书馆/扩展程序

请询问是否还有其他需要知道的事情

Answer 1

我认为你可以使用terminal directive。你对使用limitBy感觉如何？例如，将列表限制为50个元素会因节省渲染时间而大幅提高性能。

如何在搜索vuejs列表时添加加载图标

1 个答案: