v-for

1、v-for 遍历数组
	<div>
        <!-- v-for 遍历数组 -->
        <ul>
            <!-- 1、在遍历的过程中,没有使用下标值(索引值) -->
            <!-- item 是数组中的每一项,names 是数组的名字 就是相当于 v-for="item in array" -->
            <li v-for="item in names">{{item}}</li>
        </ul>
        <ul>
            <!-- 2、在遍历过程中,获取索引值,index是数组的索引值,从0开始,这里 + 1 是为了看起来正常一点 -->
            <li v-for="(item,index) in names">{{index + 1}}.{{item}}</li>
        </ul>
    </div>
2、 v-for 遍历对象
<div id="app">
        <!-- 遍历对象 -->
        <ul>
            <!-- 1、在遍历对象的过程中,如果只是获取一个值,那么获取到的是value 就是{key:value}的这个value -->
            <li v-for="item in info">{{item}}</li>
        </ul>
        <ul>
            <!-- 2、获取key 和value  格式:(value,key)	输出的是这样:luluwang-name -->
            <li v-for="(value,key) in info">{{value}}-{{key}}</li>
        </ul>
        <ul>
            <!-- 3、获取key 和value 和index  格式:(value,key,index)	输出:0-luluwang-name -->
            <li v-for="(value,key,index) in info">{{index}}-{{value}}-{{key}}</li>
        </ul>
    </div>
    <script type="text/javascript">
        const app = new Vue({
            el: '#app',
            data: {
                info: {
                    name: 'luluwang',
                    age: 18,
                    height: 165
                }
            }
        })
    </script>
3、给 v-for 加 key属性

使用v-for 的时候,给对应的元素或组件添加上一个:key 属性,为了更好地复用,但是要保证这个 key 的值是唯一的,不然没什么意义。

Logo

前往低代码交流专区

更多推荐