Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
1.1k views
in Technique[技术] by (71.8m points)

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

<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是我选择的那个元素,怎么给这个元素设置样式?


与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

block这里 用个对象表示class

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

并设置choose类的样式:

.choose {
    background: green
}

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...