<template>
    <div>
        <div class="div">
            <text class="text text_child_nth_1" :style="{ color: color, 'font-size': '50px',padding:'50px' }">Hello
            </text>
            <text class="text text_child_nth_2" :style="{ color: color, 'font-size': '50px',padding:'50px' }">Hello
            </text>
        </div>
        <div class="div">
            <text style="padding: 10px;" :class="[getClass('text',index)]" v-for="(item,index) in lists">
                {{item}}
            </text>
        </div>
    </div>

</template>
<script>
    export default {
        data: function () {
            return {
                color: 'green',
                lists: ["first", "second", "three"]
            }
        },
        mounted: function () {

        },
        methods: {
            getClass(prefix, index) {
                return prefix + "_child_nth_" + (index + 1);
            }
        }
    }
</script>
<style scoped>
    .div {
        width: 750px;
        height: 250px;
        justify-content: center;
        flex-direction: row;

    }

    .text {
        font-size: 28px;
        flex-direction: column;
    }

    .text_child_nth_1 {
        background-color: red;
    }

    .text_child_nth_2 {
        background-color: gold;
    }
</style>