Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结

关于 Vue 指令 v-for 遍历输出 JavaScript 数组及 JSON 对象的常见方式小结，我来给您详细讲解一下。

1. 遍历 JavaScript 数组

（1）遍历数组并输出

在 Vue 中可以使用 v-for 指令对 JavaScript 数组进行遍历，并输出数组的每一项内容。语法格式如下：

<ul>
  <li v-for="(item, index) in items">{{ index }} - {{ item }}</li>
</ul>

其中，items 为遍历的数组名，item 是指当前数组项的值，index 是当前数组项的索引值，您可以按照需要替换成自己喜欢的变量名。

以下是一个简单的示例：

<div id="app">
  <ul>
    <li v-for="(fruit, index) in fruits">{{ index }} - {{ fruit }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      fruits: ['apple', 'banana', 'orange', 'grape']
    }
  });
</script>

在上述代码中，我们创建了一个 Vue 实例，并定义了一个 fruits 数组，通过 v-for 指令，我们将 fruits 数组进行遍历输出到页面上。

（2）使用数组方法进行处理

除了直接输出数组的每一项，Vue 还支持使用 JavaScript 数组自带的方法进行数据处理。例如，可以使用 filter() 方法对数组进行过滤、使用 map() 方法对数据进行格式化等等。

以下是一个使用 filter() 方法进行数组过滤的示例：

<div id="app">
  <ul>
    <li v-for="(fruit, index) in fruits.filter(f => f.indexOf('a') !== -1)">{{ index }} - {{ fruit }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      fruits: ['apple', 'banana', 'orange', 'grape']
    }
  });
</script>

在该示例中，我们仅输出数组中包含字母 'a' 的水果，使用 filter() 方法进行过滤。

2. 遍历 JSON 对象

（1）遍历对象并输出

遍历 JSON 对象与遍历 JavaScript 数组类似，同样可以使用 v-for 指令，并输出对象的每一个属性值。语法格式如下：

<ul>
  <li v-for="(value, key) in object">{{ key }} - {{ value }}</li>
</ul>

其中，object 为遍历的对象名，key 是指当前对象属性的键名，value 是指当前对象属性的值，您也可以按照自己的习惯更改这些变量名。

以下是一个比较简单的示例：

<div id="app">
  <ul>
    <li v-for="(value, key) in student">{{ key }} - {{ value }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      student: {
        name: 'Tom',
        age: 18,
        gender: 'male'
      }
    }
  });
</script>

在该示例中，我们定义了一个 student 对象，并使用 v-for 指令遍历输出了该对象中的每一个属性值。

（2）使用对象属性进行处理

与数组一样，Vue 同样支持使用 JSON 对象的属性进行数据处理。例如，使用 Object.keys() 方法获取对象中所有的键值，使用 Object.values() 方法获取对象中所有的值等等。

以下是一个使用 Object.keys() 方法获取对象所有键名的示例：

<div id="app">
  <ul>
    <li v-for="key in Object.keys(student)">{{ key }}</li>
  </ul>
</div>

<script>
  new Vue({
    el: '#app',
    data: {
      student: {
        name: 'Tom',
        age: 18,
        gender: 'male'
      }
    }
  });
</script>

在该示例中，我们使用 Object.keys() 方法获取了 student 对象中所有的键名，并使用 v-for 指令遍历输出每一个键名。

好了，以上是“Vue指令v-for遍历输出JavaScript数组及json对象的常见方式小结”的攻略，希望能对您有所帮助。如果您还有任何问题，欢迎在后面继续提问。