v-for - WDPHP云市场

在Vue.js中，可以使用v-for指令来对数组或对象进行循环渲染。

<div id="app">
  <ul>
    <li v-for="item in items">{{ item }}</li>
  </ul>
</div>

var app = new Vue({
  el: '#app',
  data: {
    items: ['item1', 'item2', 'item3']
  }
})

在上面的例子中，v-for指令会遍历数组items，并为每个元素创建一个li标签，并将该元素的值渲染到li标签中。

除了遍历数组，v-for指令也可以用于遍历对象的属性。

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

var app = new Vue({
  el: '#app',
  data: {
    object: {
      key1: 'value1',
      key2: 'value2',
      key3: 'value3'
    }
  }
})

可以使用v-for指令来遍历一个数字范围。

<div id="app">
  <ul>
    <li v-for="n in 10">{{ n }}</li>
  </ul>
</div>

如果需要同时获取数组的索引和值，可以使用第二个参数来获取索引。

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

可以在v-for指令中使用v-if来添加条件渲染。

<div id="app">
  <ul>
    <li v-for="item in items" v-if="item !== 'item2'">{{ item }}</li>
  </ul>
</div>

在使用v-for指令时，需要为每个元素添加一个唯一的key属性，以便Vue.js能够更高效地渲染。

<div id="app">
  <ul>
    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
  </ul>
</div>

以上就是Vue.js中v-for指令的基本用法和一些常见技巧，希望对你有帮助！