Vue3中v-for循环渲染之v-for指令遍历对象

 Vue3中v-for循环渲染之v-for指令遍历对象

遍历对象的语法和遍历数组的语法是一样的。具体格式如下：

<div v-for="value in object">
    {{value}}
</div>

其中object是被迭代的对象，value是被迭代的对象属性的别名。

【例2.13】  v-for指令遍历对象（源代码\ch02\2.13.html）。

<div id="app">
    <ul>
        <li v-for="item in nameObj">
            {{item}}
        </li>
    </ul>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            nameObj:{
                name:"洗衣机",
                city:"上海",
                price:"6800元"
             }
           }
         }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序，结果如图2-15所示。

还可以添加第二个参数，用来获取键值；要获取选项的索引，可以添加第三个参数。

【例2.14】  添加第二和第三个参数（源代码\ch02\2.14.html）。

<div id="app">
    <ul>
        <li v-for="(item,key,index) in nameObj">
            {{index}}--{{key}}--{{item}}
        </li>
    </ul>
</div>
<!--引入Vue文件-->
<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
<script>
    //创建一个应用程序实例
    const vm= Vue.createApp({
        //该函数返回数据对象
        data(){
          return{
            nameObj:{
                name:"洗衣机",
                city:"上海",
                price:"6800元"
             }
           }
         }
    //在指定的DOM元素上装载应用程序实例的根组件
    }).mount('#app');
</script>

在Chrome浏览器中运行程序，结果如图2-16所示。

              

本文节选自《Vue.js 3.x+Element Plus从入门到精通（视频教学版）》，获出版社和作者授权发布。