Question

我有一个看起来像这样的div

<div v-for="person in people">
    <p class='name' :class="{people.age == "adult" : 'green'}"></p>
</div>

我可以改变这样的类，但我有很多年龄组（大约8岁），我不知道如何做到这一点，而不在元素中放置8个逻辑参数

Answer 1

有一个名为green的课程是不好的做法 - 有一天当你重新设计网站时会发生什么，突然之前绿色现在是蓝色的......你必须回去改变模板中所有类的名称，然后去更改所有CSS。

更好的做法是拥有一个名为adult的课程，然后将CSS中adult的颜色实际设置为＆＃34;绿色＆＃34;。

除此之外，您应该将逻辑确定为person模型中的哪个组。这样你就可以简单地调用person.age_group（例如）并返回字符串adult，然后将其映射到你想要的任何颜色。

这样，您的模板中不仅没有大的条件块，您的其他代码块也可以调用相同的函数并确定＆＃34;类型＆＃34;用户（成人/儿童等）

Answer 2

使用这样的计算属性：

computed: {
    computedPeople: function(){
        return this.people.map(function(person){
            person.cls = {
                green: person.age == "adult",
                //otherClass: otherCondition ...
                //...
                //...
            };
        });
    }
},

然后

<div v-for="person in computedPeople">
    <p class='name' :class="person.cls"></p>
</div>

如何将多个条件样式应用于元素

2 个答案: