[Vue.js]学习笔记-Vue.js循环语句-迭代对象 - 苏飞论坛

v-for 迭代对象

v-for 可以通过一个对象的属性来迭代数据，通过下面两个实例进行v-for迭代对象的使用方法学习

实例一：

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<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>

</body>

</html>

运行结果如下：

(, 下载次数: 141)

通过本例可以看到，在ul的li中，通过object给li赋值，并且在js中， object存在三个值， name， url， slogan，

运行绑定后，页面成功的迭代了此object的三个值，这就是Vue的循环语句 v-for的迭代数据使用方法。

实例二：

实现页面上，显示key：value的循环数据迭代操作，如下所示：

(, 下载次数: 142)

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ul>

    <li v-for="(value, key) in object">

    {{ key }} : {{ value }}

    </li>

  </ul>

</div>



<script>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

</script>

</body>

</html>

通过实例二可以看到，此处是提供第二个的参数为键名，第一个key，作为参数的名称显示

作者: 范范 时间: 2018-12-9 19:31
v-for的迭代数据，还可以将第三个参数为索引

[HTML] 纯文本查看 复制代码

<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>Vue 测试实例 - 苏飞论坛(sufeinet.com)</title>

<script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>

</head>

<body>

<div id="app">

  <ul>

    <li v-for="(value, key, index) in object">

     {{ index }}. {{ key }} : {{ value }}

    </li>

  </ul>

</div>



<script>

new Vue({

  el: '#app',

  data: {

    object: {

      name: '菜鸟教程',

      url: 'http://www.runoob.com',

      slogan: '学的不仅是技术，更是梦想！'

    }

  }

})

</script>

</body>

</html>

(, 下载次数: 136)