v-for，key属性，v-if和v-show

• v-for和key属性：

v-for= " x in y" 的格式，y可以为普通数组，对象数组，对象和数字

1）迭代数组
2）迭代对象中的属性
3）迭代数字

<div id="app">
        <!--都是值在前，索引值在后
        注：若迭代数字，则前面的 count 值从 1 开始-->
        <p v-for="(item, i) in list">索引值：{{i}} --- 每一项：{{item}}</p>
        <p v-for="(users, i) in list1">id: {{users.id}} --- name: {{users.name}} --- 索引值：{{i}}</p>
        <p v-for="(val, key, i) in user">值：{{val}} --- 键：{{key}} --- 索引：{{i}}</p>
        <p v-for="count in 10">这是第 {{count}} 次循环</p>
    </div>

    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                list: [1, 2, 3, 4, 5, 6],
                list1: [{
                    id: 1,
                    name: 'zs1'
                }, {
                    id: 2,
                    name: 'zs2'
                }, {
                    id: 3,
                    name: 'zs3'
                }, {
                    id: 4,
                    name: 'zs4'
                }],
                user: {
                    id: 1,
                    name: 'Anger',
                    gender: '女'
                }
            },
            methods: {}
        })
    </script>

• v-for中key的使用注意事项：

在2.2.0+的版本里，当在组件中使用v-for时，key是必须的，用来标识当前循环项的唯一身份。

在一些特殊情况下，v-for会出现问题，比如你通过v-for渲染出一个对象数组，并选中其中一项时，在对象数组头部动态添加对象，会导致被选中的对象改变（因为头部动态添加，对象元素整体下移，但显示被选中的位置却没变），这是因为v-for选中的是索引值，并未和对象元素绑定，所以出现了问题，在下图中可看见，被选中的索引值一直都是2，但此时的对象并不一样，原本是想选中“小简”，一添加新元素就变成选中“小包”，这时可通过key来绑定对象解决问题。

这是添加前的状态：

这是未使用key添加后的状态：

<div id="app">
        id: <input type="text" v-model="id"> Name: <input type="text" v-model="name">
        <input type="button" value="添加" @click="add">
        <div v-for="(user,i) in list">
            <input type="checkbox">{{user.id}} --- {{user.name}} --- 索引值：{{i}}
        </div>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                id: "",
                name: "",
                list: [{
                    id: 1,
                    name: '小豆'
                }, {
                    id: 2,
                    name: '小包'
                }, {
                    id: 3,
                    name: '小简'
                }, {
                    id: 4,
                    name: '小单'
                }, {
                    id: 5,
                    name: '小白'
                }]
            },
            methods: {
                add: function() {
                    //这是在数组末尾添加元素，不会出现什么问题
                    // this.list.push({
                    //     id: this.id,
                    //     name: this.name
                    // });

                    //这是在数组头部添加元素，未绑定对象就会出现问题，你可以选中一个，再添加一个看看
                    this.list.unshift({
                        id: this.id,
                        name: this.name
                    })
                }
            }
        })
    </script>

添加key来标识当前循环项：

<!--注意：v-for循环时，key属性只能使用 number 或者 string ，所以:key="user.id"也可以
        key在使用时，必须使用v-bind属性绑定的形式，不然无法识别引号里面的变量，指定key的值-->
        <div v-for="(user,i) in list" v-bind:key="user.name">
            <input type="checkbox">{{user.id}} --- {{user.name}} --- 索引值：{{i}}
        </div>

• v-if和v-show：

v-if 和 v-show 通过赋值为 true 和 false 来确定元素是否可见，两者区别为：
v-if ：每次都会重新删除或创建元素。
v-show ：不会重新进行DOM的删除和创建操作，只是切换了元素的 display：none 样式。
如果显示和隐藏元素过于频繁，最好使用v-show，v-if每次都会重新删除和添加，有较高的切换性能消耗；如果元素可能很少或者永远也不会被显示被用户看到，则推荐使用v-if，比如一些悬浮窗，使用v-show太占内存。

<div id="app">
        <input type="button" value="turn" @click="flag=!flag">
        <h3 v-if="flag">这是一个用v-if控制的元素</h3>
        <h3 v-show="flag">这是一个用v-if控制的元素</h3>
    </div>
    <script>
        var vm = new Vue({
            el: '#app',
            data: {
                flag: true
            }
        })
    </script>