VUE v-for 遍历数组/对象

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 的值是唯一的，不然没什么意义。