动态类名答案

【问题标题】：Dynamic class name动态类名
【发布时间】：2017-03-13 19:31:56
【问题描述】：

如何生成动态类名？

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

此示例不起作用！以后需要这个类名来更新div！！！

【问题讨论】：

标签： vue.js slim-lang

【解决方案1】：

我不熟悉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，您不能使用 mustache ({{...}}) 语法进行属性绑定。您需要按如下方式绑定您的id：

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

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

【讨论】：

我不确定我是否理解你的例子，我不需要使用条件类，我需要静态类。

【解决方案2】：

这对我有帮助。

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

【讨论】：

工作。太棒了！不过，这应该列在文档中。
效果很好。使用 ES6：:class="[`obj-${obj.id}`]"

【解决方案3】：

您的代码确实有效，我想问题是 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'},
        ]
    }
  });

【讨论】：

【解决方案4】：

对于多个类：

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

【讨论】：

【解决方案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" }
  ],
},

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

【讨论】：

【解决方案6】：

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

数组

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

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

对象

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

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

所以对于这个问题，我们可以这样写。

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

【讨论】：