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
}