zoukankan      html  css  js  c++  java
  • vue v-for语法遍历

    v-for除了可以迭代数组,也可以迭代对象。语法基本类似(:key=index一般和v-for一起使用)。

    语法:

    v-for="value in object"
    v-for="(value,key) in object"
    v-for="(value,key,index) in object"

    1个参数时,得到的是对象的属性值
    2个参数时,第一个是属性值,第二个是属性名
    3个参数时,第三个是索引,从0开始

    示例:

    <div id="app">
        <ul>
            <li v-for="(value, key, index) in user" :key=index>
                {{index + 1}}. {{key}} - {{value}}
            </li>
        </ul>
    </div>
    <script src="./node_modules/vue/dist/vue.js"></script>
    <script type="text/javascript">
        var vm = new Vue({
            el:"#app",
            data:{
                user:{name:'名字', sex:'性别', age: 20}
            }
        })
    </script>

    遍历数组

    语法:
    v-for="item in items"
    items:要遍历的数组,需要在vue的data中定义好。
    item:迭代得到的数组元素的别名

    数组角标
    在遍历的过程中,如果我们需要知道数组角标,可以指定第二个参数:
    语法
    v-for="(item,index) in items"
    items:要迭代的数组
    item:迭代得到的数组元素别名
    index:迭代到的当前元素索引,从0开始。
    示例

    <ul>
        <li v-for="(p, index) in person">
            {{index + 1}}. {{p.name}} - {{p.gender}} - {{p.age}}
        </li>
    </ul>
  • 相关阅读:
    克罗谈投资策略14
    克罗谈投资策略13
    克罗谈投资策略12
    克罗谈投资策略11
    克罗谈投资策略10
    克罗谈投资策略09
    克罗谈投资策略08
    克罗谈投资策略07
    克罗谈投资策略06
    克罗谈投资策略05
  • 原文地址:https://www.cnblogs.com/konglxblog/p/14493247.html
Copyright © 2011-2022 走看看