Leo's Space

我寫故我在

0%

[Day13] 迴圈 (v-for) 進階(1)

發表於 更新於 分類於 ， Disqus：
文章字數： 4.1k 所需閱讀時間 ≈ 4 分鐘

物件與陣列的索引

我們可以用陣列或者物件的形式來存放資料，並且透過 v-for 的方式將資料全部顯示出來，其中我們會使用 index 來存放資料的索引值，而物件和陣列最大的差別就在於索引值部分，陣列是用數字由 0 依序表示索引，而物件則用物件內部指定名稱表示索引。

1
2
3
4
5
6
7
8
9
10
11
12
<body>
    <div id=app>
        陣列資料
        <ul>
            <li v-for="(item,index) in dataArray">{{index}}:{{item.name}}{{item.age}}</li>
        </ul>
        物件資料
        <ul>
            <li v-for="(item,index) in dataObject">{{index}}:{{item.name}}{{item.age}}</li>
        </ul>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            dataArray: [
                {
                    name: 'Leo',
                    age:23
                },
                {
                    name: 'Marry',
                    age:30
                },
                {
                    name: 'Peter',
                    age:34
                },
            ],
            dataObject: {
                one:{
                    age:23
                },
                two:{
                    age:30
                },
                three:{
                    age:34
                }
            },
        }
    })
</script>

key 值應用

我們如果使用 v-for 來顯示陣列資料，用 li 當成顯示方式，並且在每個 li 中間加入輸入欄位，此時我們依照資料 age 的大小，分別在輸入欄位輸入數字1~3，1 表示 age 最小的，3 表示最大的。當我們在使用一個反轉陣列的方法時，會發現原本輸入數字沒有跟著資料欄位移動。這是因為 Vue 為了確保效能，會盡量避免重複渲染已經渲染好的元素，所以只有部分元素重新渲染。這時我們使用到 key 就可以使元素重新渲染，記得 key 值要找都不一樣，確保可識別唯一性，比如像是 age 資料就都是不一樣的，當我們使用 key 後在使用反轉陣列方法時，就可以發現輸入的數字也會隨著資料反轉。

1
2
3
4
5
6
7
8
9
10
11
<body>
    <div id='app'>
        <ul>
            <li v-for="item in dataArray" >{{item.name}}{{item.age}} <input type="text"> </li>
        </ul>
        <ul>
            <li v-for="(item,key) in dataArray" :key='item.age'>{{item.name}}{{item.age}} <input type="text"> </li>
        </ul>
        <button @click="reverse(dataArray)">反轉陣列</button>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            dataArray: [
                {
                    name: 'Leo',
                    age:23
                },
                {
                    name: 'Marry',
                    age:30
                },
                {
                    name: 'Peter',
                    age:34
                },
            ]
        },
        methods: {
            reverse:function(arr){
                arr.reverse();
            }
        },
    })
</script>

https://i.imgur.com/eq42ws9.png

filter 用法

有時候我們要篩選陣列裡面的資料，這時候就可以用 js 內建處理陣列的方法 filter() 來幫助我們過濾資料，而 filter() 的特性是它會 return 後方條件為 true 的物件。範例程式是用一個 dataArray 陣列來存放我們的原始資料，用 search 來代表我們要找尋的資料，並用 v-model 將它的值和 input 輸入欄位綁在一起，而 newArr 陣列則是來放我們透過 fliter 過濾後的資料。最後我們寫一個 fil 方法，方法先宣告變數名稱 vm 為 this，接下來我們就可以透過 vm 來存取 Vue 應用中的資料，最後當 filter 函數 return 後面的條件式是 true ，也就是 search 搜尋的文字和原本資料(此時用 item 代表)的 name 一樣時( match 方法)，陣列中所屬的物件就會傳到 newArr 陣列中。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
<body>
    <div id='app'>
        原本資料
        <ul>
            <li v-for="item in dataArray">{{item.name}}{{item.age}}</li>
        </ul>
        過濾資料
        <ul>
            <li v-for="item in newArr">{{item.name}}{{item.age}}</li>
        </ul>
        <input v-model="search">
        <button @click="fil">搜尋資料</button>
    </div>
</body>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data:{
            dataArray: [
                {
                    name: 'Leo',
                    age:23
                },
                {
                    name: 'Marry',
                    age:30
                },
                {
                    name: 'Peter',
                    age:34
                },
            ],
            search:'',
            newArr:[]
        },
        methods: {
            fil:function(){
                var vm = this;
                vm.newArr = vm.dataArray.filter(function(item){
                    return vm.search.match(item.name);
                                        //  寫這樣 return item.name.match(vm.search) 也可以 ;
                })
            }
        },
    })
</script>

數字用法

如果我們使用 v-for in 一個數字並將它綁定在 li 標籤上，li 標籤就會渲染出從1到你指定的數字到畫面上。

1
2
3
4
5
6
7
<body>
    <div id='app'>
        <ul>
            <li v-for='item in 10'>{{item}}</li>
        </ul>
    </div>
</body>
1
2
3
4
5
6
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    var app = new Vue({
        el: '#app',
    })
</script>