入门客AI创业平台(我带你入门,你带我飞行)
博文笔记

Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式

创建时间:2017-09-18 投稿人: 浏览次数:117


定义数据:

<script>
    new Vue({
        el:"#test",
        data:{
            message:"infor",
            list:["a","b","c","d","e"],
            web:{
                "百度":"https://www.baidu.com",
                "搜狐":"https://www.sohu.com",
                "新浪":"https://www.sina.com",
                "淘宝":"https://www.taobao.com"
            }
        }
    })
</script>


html结构:

<div id="test">
        <div>{{ message }}</div>
        <div>{{ list }}</div>
        <div>{{ web }}</div>
    </div>


输出结果:


v-for对数组的几种输出方式:

1.只输出value值

html代码:

<div id="test">
        <div v-for = "item in list">{{ item }}</div>
    </div>

输出结果:


2.输出value值且输出对应的索引值

html代码:

<div id="test">
        <div v-for = "(item,index) in list">{{ item }}的索引值是{{ index }}</div>
    </div>


输出结果:



v-for对json格式的几种输出方式

1.只输出value值

html代码:
声明:该文观点仅代表作者本人,入门客AI创业平台信息发布平台仅提供信息存储空间服务,如有疑问请联系rumenke@qq.com。
  • 上一篇:没有了
  • 下一篇:没有了
未上传头像