怎样使用 v-for ?

v-bind / v-on / v-if / v-for , 这四个指令应该是 vue 里面最常用的了, 之前已经简单记录的前三个的使用方法, 接下来就记一下 v-for 的基本用法.

1. v-for 需要使用 x in xs 的这种写法, 类似 for i in rangeA 循环, xs 代表需要循环创建的数据源, 所有可迭代对象, 包括一般对象都是可以作为 v-for 的循环数据源的. 而 x 则是循环的当前数据的别名. 如下所示, 我们发现 v-for 中的数据源可以不是 vApp.$data 中的属性, 而可以是在全局作用域下的任何变量.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <ul>
            <li v-for="i in names">{{ i }}</li>
        </ul>
    </div>
    <script>
        var names = ["李雷", "韩梅梅", "李强", "张伟", "张杰"];
        var vApp = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

2. 可以在 <template> 上使用 v-for, 渲染时 <template> 不会被渲染出来. 这在平时应该会经常被用到.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <template v-for="i in names">
            <img v-bind:src="i.avatar" alt="">&nbsp;&nbsp;<strong>{{ i.name }}</strong>
            <hr />
        </template>
    </div>
    <script>
        var names = [
            {"name":"李雷","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},
            {"name":"韩梅梅","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"},
            {"name":"李强","avatar":"https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg"}
        ];
        var vApp = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

3. v-for 也可以迭代对象中的数据, 注意, 这里的迭代会默认将值转换为字符串, 比如下面的 sayHello 是一个方法, 但被 toString() 为一个字符串. 注意这里 (value, key, index) in names 的用法. 这里的 index 很重要, 表示循环时的下标或当前次数.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <p v-for="(value, key, index) in names">{{ index + 1 }}. {{ key }} : {{ value }}</p>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app",
            data: {
                names: {
                    "name": "韩梅梅",
                    "avatar": "https://images.cnblogs.com/cnblogs_com/aisowe/1536642/t_sister.jpg",
                    "sayHello": function () { alert("hello") }
                    }
            }
        })
    </script>
</body>
</html>

4. 此外, v-for 也可以迭代整数和 字符串, 这个感觉是用的不多的.~.~

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script>
  <title>Vue Test</title>
</head>
<body>
    <div id="app">
        <p v-for="i in '李雷'">{{ i }}</p>
        <p v-for="n in 3 ">{{ n }}</p>
    </div>
    <script>
        var vApp = new Vue({
            el: "#app"
        })
    </script>
</body>
</html>

5. 总结起来, v-for 跟 js 中的 for in 循环在行为上是高度相似的, 可以类比.

猜你喜欢