Vue3.x系列-内置指令v-for

v-for 使用特定语法 alias in expression 

1、v-for遍历数组

<li v-for="item in nameList">
            名称:{{item.name}}-->价格:{{item.price}}
        </li>
        <!-- 使用of作为分隔符 -->
        <li v-for="item of nameList">
            名称:{{item.name}}-->价格:{{item.price}}
        </li>
        <!-- v-for还支持一个可选第二个参数 即索引 -->
        <li v-for="(item,index) in nameList">
            {{index}} --> 名称:{{item.name}}-->价格:{{item.price}}
        </li>

2、v-for遍历对象

value in object

<!-- v-for遍历对象 -->
       <ul>
        <li v-for="item in nameObj">{{item}}</li>
       </ul>
<script src="https://unpkg.com/vue@next"></script>
    <script>
       const vm = Vue.createApp({
            data(){
                return {
                    nameList:[ // 数组
                        {name:'洗衣机',price:3000},
                        {name:'冰箱',price:2000},
                        {name:'汽车',price:1000}
                    ],
                    nameObj:{
                         // 对象
                        name:"洗衣机",
                        city:"上海",
                        price:6800
                    },
                }
            }
       }).mount('#app');
    </script>

3、v-for指令遍历整数

 <!-- v-for遍历整数 -->
 <span v-for="item in 20">{{item}}</span>

4、在template上使用v-for

       <ul>
        <template v-for="(item,key,index) in nameObj">
            <li>{{index}}--{{key}}--{{item}}</li>
        </template>
        
       </ul>