vue v-for的四种遍历方法

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title></h

天马行空zqzq

3151人浏览 · 2020-07-11 16:38:08

天马行空zqzq · 2020-07-11 16:38:08 发布

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- 索引i可以省略 -->
        <p v-for="(item, i) in dist">项：{{ item }}----索引：{{ i }}</p>
        <p v-for="(item, i) in dist1">id:{{item.id}}--姓名：{{item.name}}--索引：{{i}}</p>
        <p v-for="(key, val, i) in dist2">键：{{val}}---值：{{key}}---索引：{{i}}</p>
        <p v-for="item in count">{{item}}</p>

    </div>
    <script src="node_modules/vue/dist/vue.js"></script>
    <script>
        var app = new Vue({
            el: '#app',
            data: {
                //要遍历的是普通数组：
                dist: [1, 2, 3, 4, 5, 6, 7],
                // 数组里面放了对象
                dist1: [{id: 1, name: 'zs'},{id: 2, name: 'zs1'},{id: 3, name: 'zs2'}],
                // 要遍历的是对象
                dist2: {                   
                    id: 1,
                    name: '李四1',
                    gender: '男'                  
                },
                // 要遍历的是数字,数字是从1开始遍历的
                count: 10
            }
        })
    </script>
</body>
</html>

注意：

Vue

前往低代码交流专区

更多推荐

vue 表单验证

1、6位小写字母和数字必须包含两个字母rules: [{ required: true, message: "XXX不能为空", trigger: "blur" },{ max: 6, message: "最大长度为6位字符", trigger: "blur" },{pattern: /^(?=(?:[^a-z]*[a-z]){2})[a-z0-9]{6,6}$/, //不连续的两位字母// /^