关于vue.js中v-for指令的一些用

vue.js中循环用到v-for指令有如下几种使用方法。

1.v-for指令需要以site in sites的特殊语法形式表示，sites表示数据源数组，site表示数组元素迭代的别名

<div id="app">
  <ol>
    <li v-for="site in sites">
      {{ site.name }}
    </li>
  </ol>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    sites: [
      { name: 'Runoob' },
      { name: 'Google' },
      { name: 'Taobao' }
    ]
  }
})
</script>

2.v-for迭代对象以value in object形式表示 value指的是数组元素的值

<div id="app">
  <ul>
    <li v-for="value in object">
    {{ value }}
    </li>
  </ul>
</div>
 
<script>
new Vue({
  el: '#app',
  data: {
    object: {
      name: '菜鸟教程',
      url: 'http://www.runoob.com',
      slogan: '学的不仅是技术，更是梦想！'
    }
  }
})
</script>

也可以提供第二个参数为键名如：

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

对于数组也可以使用item表示元素，index表示数组下标如：

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

3.v-for可以用来迭代整数：

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

以上为vue.js中v-for指令的一些基础语法。