1.v-for是Vue里的循环语句,与其他语言的循环大同小异。首先得有需要循环且不为空的数组,循环的关键字为in或of。

Vue.js(2.x)之列表渲染(v-for/key)

Vue.js(2.x)之列表渲染(v-for/key)

 

需要索引时的写法:

Vue.js(2.x)之列表渲染(v-for/key)

 

v-for里的in可以使用of代替:

Vue.js(2.x)之列表渲染(v-for/key)

 

还可以使用v-for的<template>标签循环多个元素块:

Vue.js(2.x)之列表渲染(v-for/key)

 

对象迭代v-for:可通过一个对象属性迭代

Vue.js(2.x)之列表渲染(v-for/key)

Vue.js(2.x)之列表渲染(v-for/key)

这种可以提供数字索引的挺好,跟其他语言一样,索引从0开始。

Vue.js(2.x)之列表渲染(v-for/key)

Vue.js(2.x)之列表渲染(v-for/key)

 

整数迭代 v-for:n从1开始,不像索引一样从0开始。且只有整数可以这样,换成小数、字母均无效。

Vue.js(2.x)之列表渲染(v-for/key)

 

HTML代码示例图:

Vue.js(2.x)之列表渲染(v-for/key)

 

浏览器页面与控制台示意图:

Vue.js(2.x)之列表渲染(v-for/key)

组件现在还不会,先略过。

 

v-for with v-if:官网文档就干干地写了这么三行,没完整的例子,还是自己随便写个完整的看看:

Vue.js(2.x)之列表渲染(v-for/key)

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue 测试实例 - 菜鸟教程(runoob.com)</title>
</head>
<body>
<ul id="example">
  <li v-for="todo in todos" v-if="!todo.isComplete">
    {{ todo.age }}
  </li>
</ul>
<script src="js/vue.js"></script>
<script>
    var vm = new Vue({
        el: '#example',
        data: {
            todos: {
                'Lily' : {
                    isComplete: 0,
                    age: 25
                },
                'Lucy': {
                    isComplete: 1,
                    age: 29
                },
                'Marry' : {
                    isComplete: 0,
                    age: 20
                }
            }
        }
    })
</script>
</body>
</html>
View Code

相关文章:

  • 2021-12-02
  • 2022-12-23
  • 2021-09-26
  • 2021-07-27
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
  • 2022-12-23
猜你喜欢
  • 2021-07-12
  • 2021-12-02
  • 2022-12-23
  • 2022-12-23
  • 2021-11-23
  • 2021-06-29
相关资源
相似解决方案