Vue.js v-for

Posted on Edited on In Views: Disqus:

 

一、對陣列的迭代

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in characters">
                {{item}}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                characters: ["a", "b", "c"]
            }
        })
    </script>
</body>

</html>

執行結果為

 

二、常數迭代

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="item in 3">
                {{item}}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
            }
        })
    </script>
</body>

</html>

執行結果為

 

三、對物件的迭代

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in list">
                {{index}} - {{item.name}}
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: '111', name: '電器' },
                    { id: '222', name: '水果' },
                    { id: '333', name: '雨衣' },
                ],
            }
        })
    </script>
</body>

</html>

執行結果為

 

四、v-for 與 key 的指定

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in list">
                <label>{{item.id}}</label>
                <input type="text" :placeholder="item.name" />
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: '111', name: '電器' },
                    { id: '222', name: '水果' },
                    { id: '333', name: '雨衣' },
                ],
            }
        })
    </script>
</body>

</html>

 

使用 v-for 所跑出的畫面如下，一切看似正常無誤

 

但現在我們要在 input tag 輸入自訂的英文名稱

 

後事於 console 端，對來源陣列做 vm.list.reverse();，

結果發現元素確實是 reverse 了，但是我們所輸入的資料卻沒跟著連動。

 

此時此刻，請指定 key 值，指向 list 中的 id

<!DOCTYPE html>
<html>

<head>
    <title>Welcome to Vue</title>
    <script src="https://unpkg.com/vue"></script>
</head>

<body>
    <div id="app">
        <ul>
            <li v-for="(item, index) in list" :key="item.id">
                <label>{{item.id}}</label>
                <input type="text" :placeholder="item.name" />
            </li>
        </ul>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [
                    { id: '111', name: '電器' },
                    { id: '222', name: '水果' },
                    { id: '333', name: '雨衣' },
                ],
            }
        })
    </script>
</body>

</html>

 

即可解決資料輸入連動問題

 

參考資料：

Vue.js: 列表渲染 v-for