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

范范 · 发表于 2018-12-9 19:29:07

导读部分

讨论区：http://www.sufeinet.com/forum-58-1.html

教程目录：http://www.sufeinet.com/thread-24026-1-1.html

教程部分

Vue.js 使用了基于 HTML 的模版语法，允许开发者声明式地将 DOM 绑定至底层 Vue 实例的数据。

另： Vue.js 的核心是一个允许你采用简洁的模板语法来声明式的将数据渲染进 DOM 的系统。

Vue.js 循环使用 v-for 指令。

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>

运行结果如下：

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

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

实例二：

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

[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:09

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>

范范 · 发表于 2018-12-9 19:31:46

通过上例，可以看到，index绑定的时候，是从0开始计数的

竹林风 · 发表于 2018-12-9 19:55:43

不错呢，楼主

站长苏飞 · 发表于 2018-12-9 20:12:35

强烈支持楼主ing……

liu · 发表于 2018-12-9 20:22:34

强烈支持楼主ing……

Amy · 发表于 2018-12-16 22:25:19

看到这帖子真是高兴！

		自动登录	找回密码
密码			马上注册

[vue.js学习笔记] [Vue.js]学习笔记-Vue.js循环语句-迭代对象

相关帖子