动态类名

Question

如何生成动态类名？

  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }} " style="float:right; color:red;"

这个样本不起作用！我需要这个类名来更新div !!!

Answer 1

这帮助了我。

    div :class="['obj-' + obj.id]" style="float:right; color:red;"

Answer 2

我不熟悉slim-lang，但这是您进入Vue模板所需的内容：

<div v-bind:class="['static-class', { 'active-class' : isActive }]">...</div>

在上述情况下，如果isActive评估为true，则会应用'active-class'。并且“静态类”始终应用于视图中。这称为数组语法。

参考：https://vuejs.org/guide/class-and-style.html#Array-Syntax

您需要确保slim-lang处理器发出上述HTML。

现在，设置id，您无法使用胡须（{{...}}）语法进行属性绑定。您需要按如下方式绑定id：

<div v-bind:id="dynamicId"></div>

参考：https://vuejs.org/guide/syntax.html#Attributes

Answer 3

对于多个班级：

:class="{'form-control':true,['box_'+index]:true}"

Answer 4

您的代码实际上有效，我猜问题是vue数据设置。我也喜欢苗条。

div#posting
  li v-for='obj in objs'
    | {{ obj.id }} {{ obj.title }}
    div id="obj-{{ obj.id }}" class="obj-{{ obj.id }} " style="float:right; color:red;"

javascript:
  var posting;
  posting = new Vue({
    el: '#posting',
    data: {
      objs:
        [
          {id: 1, title: 'xx'},
          {id: 2, title: 'yy'},
        ]
    }
  });

Answer 5

<li v-for="color in colors" :class="[color.style]" class="list">{{color.name}}</li>
</ul>

https://codepen.io/mike-oxhuge/pen/mdOMybP

   data: {
  colors: [
    { id: "1", name: "blue text", style: "blue" },
    { id: "2", name: "red text", style: "red" },
    { id: "3", name: "green text", style: "green" }
  ],
},

在这里我让它工作。类的动态名称。

Answer 6

在 vue 中，可以通过多种方式添加动态类。

• 数组

 :class="['prise', index === 0 ? 'first' : '', index === 1 ? 'second' : '']"

这里，无论发生什么，奖品都会添加到班级中，但只有当索引等于0时，才将第一个添加到班级名称中，索引等于1，然后第二个被添加到类中。

• 对象

  :class= "{ 'ultra-prise','first":index===0,'second':index===1}"

这里，在 Object 的情况下，只有当值为 true 时，才会将键添加到类中。

所以对于这个问题，我们可以简单地写下这样的东西。

   :class="[`obj-${obj.id}`]"