列表渲染（通俗易懂） vue.js

基本概念列表渲染通俗易懂一点的解释就是获取列表中的各种数据，并将它展示出来，例如一个数组中分别有a，b，c三个数据，那我们就可以用v-for来对数组进行渲染，以获得a，b，c。渲染方式v-for ：这是一个指令，搭配item in items来使用，如v-for ="item in items"，注意两点：1.此处item和items是自己取的名字，主要的意思是渲染items列表，获取的数据用it

林衍丶

3049人浏览 · 2021-09-28 19:46:20

林衍丶 · 2021-09-28 19:46:20 发布

基本概念

列表渲染通俗易懂一点的解释就是获取列表中的各种数据，并将它展示出来，例如一个数组中分别有a，b，c三个数据，那我们就可以用v-for来对数组进行渲染，以获得a，b，c。

渲染方式

v-for ：这是一个指令，搭配item in items来使用，如v-for ="item in items"，注意两点：

1.此处item和items是自己取的名字，主要的意思是渲染items列表，获取的数据用item来取名代替。

2.为了更贴近javascript迭代器的语法，分隔符in可以用of来替代，二者效果相同。

①渲染数组

此处的items是个数组。

<body>
    <div class="demo">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
    </div>


    <script>
        var app = new Vue({
            el: '.demo',
            data: {
                items: ['小李', '小黄', '小张']
            }
        })
    </script>
</body>

运行结果

由此可见，我们只需要写一个li标签就能通过列表渲染获得三个li标签，且列表中有几个数据就能获取几个li标签，非常方便。

除此之外，渲染数组时我们还可以在使用第二个参数来获取数组中每个数据的下标

用法： v-for="(item,index) in items"

<body>
    <div class="demo">
        <ul>
            <li v-for="(item,index) in items">{{index}}-{{item}}</li>
        </ul>
    </div>


    <script>
        var app = new Vue({
            el: '.demo',
            data: {
                items: ['小李', '小黄', '小张']
            }
        })
    </script>
</body>

运行结果

这就可以起到排名的作用

②渲染对象

<body>
    <div class="demo">
        <ul>
            <li v-for="item in items">{{item}}</li>
        </ul>
    </div>


    <script>
        var app = new Vue({
            el: '.demo',
            data: {
                items: {
                    姓名: '小李',
                    年龄: '20',
                    性别: '男'
                }
            }
        })
    </script>
</body>

运行结果

同样的，数组渲染也有第二个参数和第三个参数，其中第二个参数是数据的名称（键对），如上图的姓名，性别。第三个参数是下标。

<body>
    <div class="demo">
        <ul>
            <li v-for="(item,name,index) in items">{{index}}-{{name}}:{{item}}</li>
        </ul>
    </div>


    <script>
        var app = new Vue({
            el: '.demo',
            data: {
                items: {
                    姓名: '小李',
                    年龄: '20',
                    性别: '男'
                }
            }
        })
    </script>
</body>

运行结果

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}$/, //不连续的两位字母// /^