lovecoding
/
VIP26


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960
							<!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">
        <!-- 
            格式：
            v-for="(item,index) in/of data" :key="index"
            key：给元素唯一的标识
            一般渲染：数组 对象 字符串（很少） 次数（极少）
         -->
         <!-- 渲染数组 -->
         <div v-for="(item,ind) of person" :key="ind">
            名字：{{item.name}}
            年龄：{{item.age}}
            下标：{{ind}}
         </div>
         <!--渲染对象  -->
         <div v-for="(item,index) of obj" :key="index">
            {{item}}
         </div>
         <!-- 渲染字符串 -->
         <div v-for="(item,index) of str" :key="index">
            {{item}}
         </div>
         <!-- 渲染次数 -->
         <div v-for="(item,index) of 6" :key="index">
            {{item}}
         </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                person:[
                    {
                        name:"LiLi",
                        age: 10
                    },
                    {
                        name: "Jack",
                        age: 30
                    }
                ],
                obj:{
                    isColor: 'red',
                    name: 'HuaHua',
                    age: 20,
                },
                str:"Hello"
            }
        })
    </script>
</body>
</html>