vue-v-for

時間 2019-11-07

標籤 vue 简体版

原文原文鏈接

一、v-for遍歷數組和對象

<ul>
        <li v-for="item in array">{{item}}</li><br>
        <li v-for="(item,index) in array">{{item}}--{{index}}</li><br>
        <li v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</li><br>

</ul>

二、v-for綁定和非綁定key的區別html

加上key以後，可以更好的複用，減小資源的消耗。vue

<li v-for="item in list" :key="item">{{item}}</li>

沒加key以前，若是向數組中間添加一個元素，要依次替換數組元素，數組

加上key以後，能夠直接在數組中間插入這個元素。app

*完整代碼

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
</head>
<div id="app">
    <ul>
        <li v-for="item in array">{{item}}</li><br>
        <li v-for="(item,index) in array">{{item}}--{{index}}</li><br>
        <li v-for="(value,key,index) in obj">{{value}}--{{key}}--{{index}}</li><br>
    </ul><br>

    <ul>
        <li v-for="item in list" :key="item">{{item}}</li>
    </ul>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                array: [
                    '王者榮耀', '和平精英', '絕地求生'
                ],
                obj: {
                    name: '何欣航', age: '18', height: '1.80'
                },
                list:['A','B','C','D','E']
            }),
            methods: {}
        })
    </script>
</body>

</html>

小案例：點擊更換背景顏色this

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <script src="./js/vue.js"></script>
    <style>
        .active {
            background-color: yellowgreen;
        }
    </style>
</head>
<div id="app">
    <ul>
        <li v-for="(item,index) in game" v-on:click="getClass(index)" :class="{active:cindex===index}">{{item}}</li>
    </ul>
</div>

<body>
    <script>
        let vm = new Vue({
            el: '#app',
            data: () => ({
                game: ['王者榮耀', '和平精英', '爐石傳說', '穿越火線'],
                cindex: 0
            }),
            methods: {
                getClass: function (index) {
                    this.cindex = index
                }
            }
        })
    </script>
</body>

</html>

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。

vue-v-for

一、v-for遍歷數組和對象

*******完整代碼******

*完整代碼