详解Vue的列表渲染

下面我会详细讲解“详解Vue的列表渲染”的完整攻略。

什么是Vue的列表渲染

Vue的列表渲染是指Vue提供的一个功能，可以让我们在HTML模板中快速创建一个和数组相关的数据列表。该功能常用于需要遍历数据并输出模板多次的场景，比如电商网站的商品列表、新闻博客类网站的文章列表等。常用的列表渲染指令有v-for和v-bind。

Vue的列表渲染的语法

Vue提供了v-for指令来实现列表渲染，其语法如下：

<div v-for="(item, index) in items">
  {{ index }} - {{ item.text }}
</div>

其中，items是一个数组，item是数组中每一项的数据，index是item在数组中的索引。

Vue的列表渲染的示例

示例1——基本使用

以下是一个基本的v-for示例。假设我们有一个数组items，里面包含三个数据对象，每个对象包含一个title属性和一个content属性。我们可以使用v-for指令来遍历这个数组，并且在模板中输出每个数据对象的title属性和content属性。

<div id="app">
  <div v-for="item in items">
    <h2>{{ item.title }}</h2>
    <p>{{ item.content }}</p>
  </div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      items: [
        { title: 'Vue教程', content: 'Vue教程内容...' },
        { title: 'React教程', content: 'React教程内容...' },
        { title: 'AngularJS教程', content: 'AngularJS教程内容...' }
      ]
    }
  });
</script>

示例2——配合computed属性，实现列表过滤

以下是一个配合computed属性，实现列表过滤的示例。我们可以通过在computed属性中过滤数组items来筛选出用户输入的关键字相关的数据，从而实现列表过滤的效果。

<div id="app">
  <input v-model="keyword">
  <div v-for="item in filteredItems">
    <h2>{{ item.title }}</h2>
    <p>{{ item.content }}</p>
  </div>
</div>

<script>
  var app = new Vue({
    el: '#app',
    data: {
      keyword: '',
      items: [
        { title: 'Vue教程', content: 'Vue教程内容...' },
        { title: 'React教程', content: 'React教程内容...' },
        { title: 'AngularJS教程', content: 'AngularJS教程内容...' }
      ]
    },
    computed: {
      filteredItems: function() {
        var keyword = this.keyword.trim();
        if (keyword) {
          return this.items.filter(function(item) {
            return item.title.indexOf(keyword) > -1;
          });
        } else {
          return this.items;
        }
      }
    }
  });
</script>

在上述代码中，我们增加了一个input元素，用于接收用户输入的关键字。然后在computed属性中使用filter()方法过滤数组items，并赋值给filteredItems属性。最后在模板中使用v-for指令输出filteredItems中的数据。用户在input中输入关键字后，filteredItems会根据关键字进行实时过滤。