zoukankan      html  css  js  c++  java
  • Vue指令v-for之遍历输出JavaScript数组,json对象的几种方式

    定义数据:

    <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" :key="index">{{ item }}</div>
        </div>
    输出结果:

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

    html代码:

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



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

    1.只输出value值

    html代码:
    <div id="test">
            <div v-for = "value in web" :key="index">{{ value }}</div>
        </div>
    输出结果:

    2.输出value值和key值

    html代码:

    <div id="test">
            <div v-for = "(value,key) in web" :key="index">{{ key }} 的网址是 : {{ value }}</div>
        </div>
    输出结果:

    3.输出value值,key值和索引值index

    html代码:

    <div id="test">
            <div v-for = "(value,key,index) in web" :key="index">{{ value }}__{{ key }} 的网址是 : {{ item }}</div>
        </div>
    输出结果:

    可以看出,在数组里面,小括号里面的参数第一位是value值,第二位是索引值

    在json里面,第一位是value值,第二位是key值,第三位是索引值

  • 相关阅读:
    慕课前端入门-HTML5属性变化
    黑马jQuery教程4
    黑马jQuery教程3
    黑马JQuery教程2
    2017-03-15
    按钮图标化
    AES MFC实现
    CButtonST类简介使用方法
    VS资源编辑器常见错误RC1000到RC1208
    MFC单文档程序添加HTML帮助支持
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/9435215.html
Copyright © 2011-2022 走看看