uni-app入门-实战教程-二十-列表渲染

列表渲染，主要用于渲染 数组 和对象：

v-for="(val,index) val 值 index 索引
注意、 :key = "index" 最新的编译器 没有 ：key 会报错哦！

<template>
    <view>
        <!-- 一维数组 -->
        <view class="box-item" v-for="(val,index) in list1" :key = "index">
            {{index}} - {{val}}
        </view>
        <text>\n</text>
        
        <!-- 对象数组 -->
        <view class="box-item" v-for="(val,index) in list2" :key = "index">
            {{index}} - {{val.name}} - {{val.name1}}
        </view>
        <text>\n</text>
        
        <!-- 多维数组 -->
        <view class="" v-for="(val,index) in list3" :key = "index">
            {{index}} -- {{val.name}}
            <view class="for-view" v-for="(val2,index2) in val.list" :key = "index2">
                {{index2}} - {{val2}}
            </view> 
        </view>
        
        <!-- 凡是循环使用  <block></block>  ，凡是条件判断使用 <template></template>  -->
        <text>\n</text>
        <block class="box-item" v-for="(val,index) in list1" :key = "index">
            {{index}} - {{val}}
        </block>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                list1:["小米","苹果","华为"],
                list2:[
                    {
                        name:"小米",
                        id:"雷军"
                    },
                    {
                        name:"华为",
                        id:"任正非"
                    },
                    {
                        name:"苹果",
                        id:"乔布斯"
                    },
                ],
                list3:[
                    {
                        name:"国内",
                        list:["小米","华为","ov"]
                    },
                    {
                        name:"国外",
                        list:["三星","苹果"]
                    },
                ]
            }
        },
        onLoad() {

        },
        methods: {
            changeage:function(){
                this.age += 20;
            },
        }
    }
</script>

<style>
    .box{
        width: 100%;
        height: 500upx;
        border: 1upx solid #CCCCCC;
        /* 水平排列 */
        display: flex;      /* 自动换行 */
        /* flex-wrap: wrap-reverse; */
        /* 居中对齐 */
        justify-content: center;
        /* 垂直居中 */
        align-items: center;
    }
    
    
    .box-item{
        color: #FFFFFF;
        height: 300upx;
        width: 600upx;
        /* 行高 */
        line-height: 200upx;
        font-size: 30upx;
        /* 加粗 */
        font-weight: bold;
        text-align: center;
    }
    .box-item:nth-last-of-type(even){
        background: #007AFF;
    }
    .box-item:nth-last-of-type(odd){
        background: #09bb07;
    }
    .button{
        color: #007AFF;
    }
    .for-view{
        color: #DD524D;
        font-size: 10upx;
    }
</style>