lovecoding
/
vipAllDay


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869
							<!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-if 与 v-for 哪个优先级高呢？
        1.Vue2中 v-for优先级高
        2.Vue3中 v-if优先级高
        循环渲染
        v-for:
            格式：
                v-for=(item<每一项>,index(每一项的下标) in 渲染的数据) :key="index"
            为什么要绑定key？
                为了确保数据的唯一性
     -->
     <div id="app">
        <!-- 循环数组 -->
        <ul v-for="(item,index) in list" :key="index">
           <li>{{item.id}}--{{item.name}}--{{item.age}}</li> 
        </ul>
        <!-- 循环字符串 -->
        <ul v-for="(item,index) in str" :key="index">
            <li>{{item}}</li>
        </ul>
        <!-- 循环对象 -->
        <div v-for="(item,index) in obj" :key="index">
            {{item}}
        </div>
        <!-- 循环数字 -->
        <div v-for="(item,index) in num" :key="index">
            {{item}}
        </div>
     </div>
     <script src="./vue.js"></script>
     <script>
        var app = new Vue({
            data:{
                list:[
                    {
                        id:1,
                        name:"Lucy",
                        age: 10
                    },
                    {
                        id:2,
                        name:"John",
                        age: 20
                    },
                    {
                        id:3,
                        name:"Jack",
                        age: 100
                    },
                ],
                str: 'hello',
                obj: {
                    name: 'Lucy',
                    age: 10
                },
                num: 20
            }
        }).$mount("#app");
     </script>
</body>
</html>