lovecoding
/
W250913


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758596061
							<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <ul>
            <!-- v-for 循环渲染列表 -->
             <!-- v-for in 循环渲染数组 in左侧每次遍历出来的值和索引 in右侧数组    -->
              <!-- v-for 必须添加key 绑定唯一值 不能重复 -->
           <!-- <li v-for="(item,index) in list" >{{index}} ---- {{item}}</li>  -->
           <li v-for="(item,index) in list" v-bind:key="index" >{{index}} ---- {{item}}</li> 

        </ul>

        <ul>
            <!-- v-for 也可以遍历对象 -->
            <li v-for="(item,key) in obj">{{key}} : {{item}}</li>
        </ul>
        <ul>
            <li v-for="(item,key) in arr" :key="key">姓名： {{item.name}}    年龄： {{item.age}}</li>
        </ul>
    </div>
    <script src="./js/vue.js"></script>
    <script>
        new Vue({
            el:"#app",
            data:{
                list:["张三","李四","王五","赵六"],
                obj:{
                    name:"张三",
                    age:18,
                    sex:"男",
                    phone:"13800000000"
                },
                arr:[
                    {
                        name:"张三",
                        age:18
                    },
                    {
                        name:"李四",
                        age:19
                    },
                    {
                        name:"王五",
                        age:20
                    },
                    {
                        name:"赵六",
                        age:21
                    }
                ]
            }
        })
    </script>
</body>
</html>