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值,第三位是索引值

  • 相关阅读:
    在JavaScript中对HTML进行反转义
    JavaScript 删除数组中的对象
    CSS中的before和:after伪元素深入理解
    关于css浮动的一点思考
    前端常见跨域解决方案(全)
    window.location对象详解
    51nod 1001 数组中和等于K的数对
    51nod 1002 数塔取数问题
    51nod 1015 水仙花数
    51nod 1080 两个数的平方和
  • 原文地址:https://www.cnblogs.com/mmzuo-798/p/9435215.html
Copyright © 2011-2022 走看看