lovecoding
/
web0715


			
				
					
						
						
							12345678910111213141516171819202122232425262728293031323334353637383940414243444546474849505152535455565758
							<!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>
    <!-- v-for
        key:确保唯一性 
    -->
    <div id="app">
        <!-- 1.循环数组 -->
         <ul v-for="(item,index) in arr" :key="item.id">
            <li>{{index+1}}-我叫{{item.name}},今年{{item.age}}了</li>
         </ul>
         <!-- 2.循环对象 -->
          <ul v-for="(item,index) in obj" :key="index">
            <li>{{item}}</li>
          </ul>
          <!-- 3.循环字符串 -->
           <ul v-for="(item,index) in str" :key="index">
            <li>{{item}}</li>
           </ul>
           <!-- 4.循环数字 -->
            <ul v-for="(item,index) in 10" :key="index">
                <li>{{item}}</li>
            </ul>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:[{
                    id:'11',
                    name:"John Doe",
                    age:25
                },{
                    id:'22',
                    name:"Jane Smith",
                    age:30
                },{
                    id:'33',
                    name:"Alice Johnson",
                    age:28
                }],
                obj:{
                    name:'孙悟空',
                    age: 18,
                    address:'花果山'
                },
                str:'hello world'
            }
        })
    </script>
</body>
</html>