vue用列表渲染的组件，如何设置其中某一个的样式？

Question

<template>
    <div class="list-wrapper">
        <div
            class="list-block"
            v-for="item in 3"
            :key="item"
        >
            <div
                class="block"
                v-for="sub in 3"
                :key="sub"
                :style="{'background': isNowNode}"
            >
                {{ mat[item - 1][sub - 1] }}
            </div>
        </div>
        <div class="handler">
            <button @click="generator()">random</button>
        </div>
    </div>
</template>

生成一个3*3的9宫格，如何选中特定的某一个格子，给他设置背景色呢

script

data() {
    return {
        mat: [
            [1, 4, 7],
            [2, 5, 8],
            [3, 6, 9],
        ],
        position: [1, 1],
    };
},

比如 position是我选择的那个元素，怎么给这个元素设置样式？

Answer 1

block这里 用个对象表示class

:class="{
  block: true,
  choose: item == position[0] && sub == position[1]
}"

并设置choose类的样式：

.choose {
    background: green
}

Answer 2

如果这个元素的位置是固定的，你可以在css里直接用nth-child选中想要的元素(第二排第二列)

.list-block:nth-child(2) .block:nth-child(2) {
    /* 在此设置想要的样式 */
    color: red;
}

---

如果不是固定的，你可以在v-for里面加上第二个参数(y和x)，它们是元素的索引，然后判断元素的索引是否与position一致，如果一致则动态添加.selected class：

<template>
    <div class="list-wrapper">
        <div
            class="list-block"
            v-for="(item, y) in 3"
            :key="item"
        >
            <div
                class="block"
                v-for="(sub, x) in 3"
                :key="sub"
                :style="{'background': isNowNode}"
                :class="{selected: x === position[0] && y === position[1] }"
            >
                {{ mat[item - 1][sub - 1] }}
            </div>
        </div>
        <div class="handler">
            <button @click="generator()">random</button>
        </div>
    </div>
</template>

之后只需要给这个类添加想要的样式就可以了

<style scoped>
    .block.selected {
        /* 在此设置想要的样式 */
        color: red;
    }
</style>