Vue v-for 的基本使用

Vue中遍历数组和对象

建立一个基本的框架结构,在需要进行遍历循环的 表格当中 写入基本的v-for 的语法

v-for=" item in list " 

(item,index) in list" :key=" item.id "  

item：循环遍历的数组对象 

index:  遍历数组对象的索引

:key="item.id"   //key的务必设置上，通常使用id来进行赋值 因为id通常具有唯一性

注：索引具有唯一性 但是没有与数据必绑定的因素 没有关联性

下面的 一个基本的结构：

    <div id="app">
        <!-- 写入表单结构 -->
        <table class="table table-bordered table-hover table-striped">
            <thead>
                <th>索引</th>
                <th>id</th>
                <th>名字</th>
            </thead>
            <tbody>
                <tr v-for="(item,index) in list" :key="item.id">
                    <td>{{ index }}</td>
                    <td>{{ item.id }}</td>
                    <td>{{ item.name }}</td>
                </tr>
            </tbody>




        </table>


    </div>

JS代码片段 存入数据：

    <script>
        // 创建一个vue实例
        const vm = new Vue({

            el: '#app',
            data: {
                list: [{
                    id: 1,
                    name: '张三'
                }, {
                    id: 2,
                    name: '小张'
                }, {
                    id: 3,
                    name: '小李'
                }]
            }

        })
    </script>