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 循环对象中的属性内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • 浅谈vue3在项目中的逻辑抽离和字段显示

    浅谈vue3在项目中的逻辑抽离和字段显示

    本文主要介绍了vue3在项目中的逻辑抽离和字段显示,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • vue 挂载路由到头部导航的方法

    vue 挂载路由到头部导航的方法

    本篇文章主要介绍了vue 挂载路由到头部导航的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2017-11-11
  • 解决vue前端rsa加密遇到的问题message too long for RSA

    解决vue前端rsa加密遇到的问题message too long for RS

    这篇文章主要介绍了解决vue前端rsa加密遇到的问题message too long for RSA,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • element日期选择器el-date-picker样式图文详解

    element日期选择器el-date-picker样式图文详解

    最近写的项目里面有一个功能是日期选择功能,第一反应是使用element里面的el-date-picker组件,下面这篇文章主要给大家介绍了关于element日期选择器el-date-picker样式的相关资料,需要的朋友可以参考下
    2022-09-09
  • Vue-cli3 $ is not defined错误问题及解决

    Vue-cli3 $ is not defined错误问题及解决

    这篇文章主要介绍了Vue-cli3 $ is not defined错误问题及解决,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-07-07
  • vue3实现页面截图功能示例详解

    vue3实现页面截图功能示例详解

    在Vue3项目中实现页面截图的功能,可以通过使用js-web-screen-shot组件来实现,本文以toolbox.js作为案例,详细介绍了如何在Vue3框架下,利用js-web-screen-shot组件实现页面截图的具体步骤和方法,这一技术的应用,不仅可以提高用户体验,还能在需要时方便地获取页面的即时信息
    2024-10-10
  • Vuex入门之Module使用详解

    Vuex入门之Module使用详解

    这篇文章主要介绍了Vuex入门之Module使用详解,由于使用单一状态树,应用的所有状态会集中到一个比较大的对象,当应用变得非常复杂时,store 对象就有可能变得相当臃肿,需要的朋友可以参考下
    2023-11-11
  • Vuepress生成文档部署到gitee.io的注意事项及说明

    Vuepress生成文档部署到gitee.io的注意事项及说明

    这篇文章主要介绍了Vuepress生成文档部署到gitee.io的注意事项及说明,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2022-09-09
  • Vue3 Echarts通用的折线图带阴影效果实现

    Vue3 Echarts通用的折线图带阴影效果实现

    在环保仓管项目中,做了一个每月对药品、消耗品、设备的进出,进行统计百分比,效果好看,后面经常在用这个样式,下面通过示例代码分享Vue3 Echarts通用的折线图带阴影效果实现,感兴趣的朋友一起看看吧
    2024-07-07
  • vue使用Google地图的实现示例代码

    vue使用Google地图的实现示例代码

    这篇文章主要介绍了vue使用Google地图的实现示例代码,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2018-12-12

最新评论