怎样使用 v-for

itxm 2021年03月09日编程语言 407 0

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 循环在行为上是高度相似的, 可以类比.

IT源码网 jquery 前端

微信公众号号：IT虾米（左侧二维码扫一扫）欢迎添加！

Q : 823053937

热贴推荐

怎样使用 v-for