列表渲染指令 v-for

一、v-for遍历数组

     语法:<标签 v-for='item in 数组'></标签>    用 v-for 指令根据一组数组的选项列表进行渲染

    <div id="app">
        <button @click="add">添加</button>
        <ul>
            <li v-for = "(item,index) in list">{{index}}-{{item}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:['牛奶','咖啡','果汁','茶']
            },
            methods:{
                add(){
                    this.list.push('奶茶')
                }
            }
        })
    </script>

二、 v-for可以遍历对象

语法:<标签 v-for="(val,key)in 对象"></标签>

    <标签 v-for="val in 对象"></标签>

    <div id="app">
        <ul>
            <!-- 对象有多少个属性就会产生多少个这样的标签。 -->
            <li v-for="item in obj">{{ item }}</li>
            <!-- 第一个参数是属性值,第二个参数是属性名。 -->
            <!-- 跟名字无关,也可以简写只拿属性值。 -->
            <hr>
            <li v-for="(val,key) in obj">{{val}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                obj:{
                    name:'李斯',
                    age:20,
                    sex:'女'
                }
            }
        })
    </script>

三、v-for遍历数字（指定次数的循环）

    <div id="app">
        <ul>
            <!-- num是1到9 -->
            <li v-for="num in 20">{{num}}</li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            
        })
    </script>

四、v-for中key的作用

vue中列表循环需加:key="唯一标识" 唯一标识尽量是item里面id等，因为vue组件高度复用增加Key可以标识组件的唯一性，为了更好地区别各个组件 key的作用主要是为了高效的更新虚拟DOM。

    <div id="app">
        <button @click="list.splice(1,0,{id:4,name:'lisi'})">添加</button>
        <ul>
            <li v-for="item in list" :key="item,id">
                <input type="checkbox">
                <span>{{item.name}}</span>
            </li>
        </ul>
    </div>
    <script src="../vue.js"></script>
    <script>
        new Vue({
            el:'#app',
            data:{
                list:[
                    {id:1,name:'lisi'},
                    {id:2,name:'lisi'},
                    {id:3,name:'lisi'}
                ]
            }
        })
    </script>