vue中v-for 循环对象中的属性

 更新时间:2021年11月22日 09:30:11   作者:huxiaoxiao  
这篇文章主要介绍了 vue中v-for 循环对象中的属性,文章围绕v-for 循环对象的相关资料展开详细内容,需要的朋友可以参考一下,希望对大家有所帮助

1、循环对象内的值

<body>



    <div id="app">

        <!-- 循环对象内的值 -->

        <ul>

            <li v-for="item in per">

                {{item}}

            </li>

        </ul>

    </div>



    <script src="./js/vue.js"></script>

    <script>



        let vm =new Vue({

            el:'#app',

            data:{

                per:{

                    id:1,

                    name:'小明',

                    age:19,

                    sex:"男"

                }

            }

        })

    </script>

2、循环对像

3、循环键和值

<!-- 循环键和值 -->

        <ul>

                    <!-- 值    键 -->

            <li v-for="(value,key) in per">

                {{value}}---{{key}}

            </li>

        </ul>

到此这篇关于 vuev-for 循环对象中的属性的文章就介绍到这了,更多相关 v-for 循环对象中的属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等

    Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等

    最近在学Vue和javascript感觉js的好多方法都不太清楚,这里彻底总结下,这篇文章主要给大家介绍了关于Vuejs对象常用操作之取对应的值、取key和value值、转数组及合并等的相关资料,需要的朋友可以参考下
    2024-01-01
  • vue webpack重写cookie路径的方法

    vue webpack重写cookie路径的方法

    webpack提供的反向代理服务器在开发阶段非常方便,几行简单的代码配置就可以使用反向代理功能,包括路径重写、cookie处理等。这篇文章主要介绍了vue webpack重写cookie路径,需要的朋友可以参考下
    2019-07-07
  • 计算属性和侦听器详情

    计算属性和侦听器详情

    这篇文章主要介绍了计算属性和侦听器,文章以介绍计算属性、侦听器的相关资料展开详细内容,需要的朋友可以参考一下,希望对你有所帮助
    2021-11-11
  • vue实现图片预览组件封装与使用

    vue实现图片预览组件封装与使用

    这篇文章主要为大家详细介绍了vue实现图片预览组件封装与使用,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2019-07-07
  • vue中多附件上传的实现示例

    vue中多附件上传的实现示例

    这篇文章主要介绍了vue中多附件上传的实现示例,帮助大家更好的理解和学习使用vue框架,感兴趣的朋友可以了解下
    2021-04-04
  • vue中的mescroll搜索运用及各种填坑处理

    vue中的mescroll搜索运用及各种填坑处理

    这篇文章主要介绍了vue中的mescroll搜索运用及各种填坑处理,文中通过代码给大家讲解了mescroll vue使用,感兴趣的朋友跟随小编一起看看吧
    2019-10-10
  • 基于vue3实现一个抽奖小项目

    基于vue3实现一个抽奖小项目

    在公司年会期间我做了个抽奖小项目,非常棒,今天把他分享到脚本之家平台,供大家学习参考,对vue3实现抽奖小项目感兴趣的朋友一起看看吧
    2023-01-01
  • 一篇文章教你实现VUE多个DIV,button绑定回车事件

    一篇文章教你实现VUE多个DIV,button绑定回车事件

    这篇文章主要介绍了VUE多个DIV绑定回车事件,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2021-10-10
  • Vue项目中ESlint规范示例代码

    Vue项目中ESlint规范示例代码

    这篇文章主要给大家介绍了关于Vue项目中ESlint规范的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用Vue具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-07-07
  • vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)

    vue3 elementPlus 表格实现行列拖拽及列检索功能(完整代码)

    本文通过实例代码给大家介绍vue3 elementPlus 表格实现行列拖拽及列检索功能,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-10-10

最新评论