lovecoding
/
VIP32


			
				
					
						
						
							1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374
							<!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-if 与 v-for 谁的优先级高？
            1.Vue2中 v-for优先级高
            2.Vue3中 v-if优先级高
         -->
        <!-- v-for 
            为什么要绑定key? 为了数据的唯一性
            格式：
            v-for="(item<每一项>,index<每一项的下标>) in/of 循环的值（数组,对象,数字,字符串）" :key="index"
        -->
        <!-- 1.渲染数组 -->
        <div v-for="(item,index) in arr" :key="key">
            我叫{{item.name}}--今年{{item.age}}了--我是{{item.sex}}孩
        </div>
        <!-- 2.渲染对象 -->
        <div v-for="(item,index) in obj" :key="index">
            {{item}}
        </div>
        <!-- 3.渲染number -->
        <div v-for="(item,index) in 10" :key="index">
            {{item}}
        </div>
        <!-- 4.渲染字符串 -->
        <div v-for="(item,index) in str" :key="index">
            {{item}}
        </div>
    </div>
    <script src="./vue.js"></script>
    <script>
        var app = new Vue({
            el:"#app",
            data:{
                arr:[
                    {
                        name:"Lucy",
                        age: 11,
                        sex: '女'
                    },
                    {
                        name:"八戒",
                        age: 21,
                        sex: '男'
                    },
                    {
                        name:"孙悟空",
                        age: 27,
                        sex: '男'
                    },
                    {
                        name:"唐僧",
                        age: 33,
                        sex: '女'
                    }
                ],
                obj: {
                    name: "沙和尚",
                    like: "吃肉",
                    special: "力大无穷"
                },
                str:'hello'
            }
        })
    </script>
</body>
</html>