Vuejs 将 css 类添加到数组中的 ul li 列表

脂肪

我有这样的数组:

items : [
   {
      cssClass : 'item1'
      text : 'some text 1'
   }

   {
      cssClass : 'item2'
      text : 'some text 2'
   }
]

我想要使​​ li 具有这个 cssClass 类名

<ul>
  <li v-for="item in items" class="{{item.className}}">{{item.text}}</li> 
</ul>

我需要这种类型的输出

<ul>
    <li class="item1">some text 1</li>
    <li class="item2">some text 2</li>
</ul>
斯里尼瓦斯·达曼

要动态绑定密钥,您可以这样做

 <li v-for="item in items" :class="{[item.cssClass] : true}">{{item.text}}</li>

或者

  <li v-for="item in items" :class="item.cssClass">{{item.text}}</li> 

本文收集自互联网,转载请注明来源。

如有侵权,请联系[email protected] 删除。

编辑于
0

我来说两句

0条评论
登录后参与评论

相关文章

来自分类Dev

使用jquery将li添加到现有ul

来自分类Dev

CSS使UL列表包装LI

来自分类Dev

将li添加到ul中以查找是否存在

来自分类Dev

将<li>添加到<ul>并删除附加到<ul>的<li>

来自分类Dev

jQuery将CSS类添加到父<ul>元素

来自分类Dev

如何将<ul>添加到li组

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

将列表元素动态添加到ul元素

来自分类Dev

ul li的CSS问题列表

来自分类Dev

为列表的CSS寻求帮助(UL LI)

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

Vue-将类从迭代列表中的子组件添加到父LI?

来自分类Dev

Python Selenium将Li添加到ul

来自分类Dev

将CSS类添加到父级li和sub li

来自分类Dev

如何将<li>附加到<ul>并使用jquery同时在<li>上设置css

来自分类Dev

CSS使UL列表包装LI

来自分类Dev

Javascript使用数组将li添加到ul

来自分类Dev

使用JavaScript将CSS类添加到动态ul li标签

来自分类Dev

如何使用jQuery将“ <li>”添加到“ <ul>”?

来自分类Dev

将类添加到具有(大于)2 li的ul的ul

来自分类Dev

当使用jquery单击特定li时,如何将css类添加到列表中?

来自分类Dev

如何将<ul>添加到li组

来自分类Dev

使用jQuery将子li动态添加到ul

来自分类Dev

如何将类添加到ul li

来自分类Dev

将UL添加到LI(不将LI添加到UL)

来自分类Dev

使用JavaScript将多个Li添加到Ul

来自分类Dev

当导航位于外部文件中时,如何使用 jQuery 将类添加到导航 ul li a?

来自分类Dev

删除 ul 列表中的重复 li

来自分类Dev

使用javascript将css类添加到ul中的所有li父元素