动态 class 名称

Question

如何生成动态class名称？

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

此示例无效！我需要这个 class 名称稍后更新 div!!!

Answer 1

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

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

在上述情况下，如果 isActive 的计算结果为 true，则将应用 'active-class'。并且 'static-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

Answer 2

这对我有帮助。

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

Answer 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'},
        ]
    }
  });

Answer 4

对于多个类:

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

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" }
  ],
},

在这里我成功了。 class.

的动态名称

Answer 6

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

数组

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

这里，无论发生什么，奖品都会加到class上，但只有当索引等于0时，才会把第一个加到class名字上，并且index 等于 1，则第二个将被添加到 class.

对象

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

这里，在 Object 的情况下，只有当值为 true 时，key 才会被添加到 class。

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

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

动态 class 名称

Dynamic class name

slim-lang

vue.js