vue-v-for

1、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>

2、v-for绑定和非绑定key的区别

 加上key之后，能够更好的复用，减少资源的消耗。

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

没加key之前，如果向数组中间添加一个元素，要依次替换数组元素，

加上key之后，可以直接在数组中间插入这个元素。

 *******完整代码******

<!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>

小案例：点击更换背景颜色

 

 

<!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>

 

posted @ 2019-10-24 16:27  个人升级打怪  阅读(397)  评论(0)  编辑  收藏  举报