动态类名

Question

如何生成动态类名？

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

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

原文由 NeverBe 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

这对我有帮助。

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

原文由 NeverBe 发布，翻译遵循 CC BY-SA 3.0 许可协议

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

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

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

原文由 Mani 发布，翻译遵循 CC BY-SA 3.0 许可协议