Vue学习笔记(5)-循环v-for

在模板中可以用v-for指令来循环数组，对象。

循环数组

<div id="app">
    <table>
        <thead>
            <tr>
                <th>序号</th>
                <th>标题</th>
                <th>作者</th>
            </tr>
        </thead>
        <tbody>
            <tr v-for="(book,index) in books">
                <td>{{index}}</td>
                <td>{{book.title}}</td>
                <td>{{book.author}}</td>
            </tr>
        </tbody>
    </table>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            books: [{
                'title': '三国演义',
                'author': '罗贯中'
            },{
                'title': '水浒传',
                'author': '施耐庵'
            },{
                'title': '西游记',
                'author': '吴承恩'
            },{
                'title': '红楼梦',
                'author': '曹雪芹'
            }]
        }
    });
</script>

循环对象

<div id="app">
    <div v-for="(value,key) in person">
        {{key}}:{{value}}
    </div>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            person: {
                "username": "知了",
                "age": 18,
                "homepage": "https://www.baidu.com/"
            }
        }
    });
</script>

循环中的坑：保持状态

循环出来的元素，如果没有使用key元素来唯一标识，如果后期的数据发生了更改，默认是会重用的，并且元素的顺序不会跟着数据的顺序更改而更改。比如:

<div id="app">
    <div v-for="(book,index) in books">
        <label for="book">{{book}}</label>
        <input type="text" v-bind:placeholder="book">
    </div>
    <button v-on:click="changeBooks">更换图书</button>
</div>
<script>
    let vm = new Vue({
        el: "#app",
        data: {
            books: ['三国演义','水浒传','红楼梦','西游记']
        },
        methods: {
            changeBooks: function(event){
                this.books.sort((x,y) => {
                    return 5 - parseInt(Math.random()*10)
                });
            }
        }
    });
</script>

如果你在某个input标签中输入了值，然后点击了“更换图书”的按钮，你会发现及时数据更改了，input并不会跟着数据的更改而更改，这时候我们只需要在v-for的时候加上一个key属性就可以了。示例代码如下：

<div v-for="(book,index) in books" v-bind:key="book">
    <label for="book">{{book}}</label>
    <input type="text" v-bind:placeholder="book">
</div>

注意，key只能是整形，或者是字符串类型，不能为数组或者对象。