问答博客资讯标签用户活动
logo极客观点logo项目管理logoHarmonyOS
javascript
前端
python
node.js
react
vue.js
php
laravel
go
人工智能
mysql
linux
ios
java
android
css
typescript
spring
程序员
logoONES 研发管理logo思否企业问答logo安谋科技 XPU

用v-for渲染列表，如何根据li的内容改变表格某一个li的class？

头像
TUTULA
    2057

    用v-for渲染列表，如何根据li的内容改变表格某一个li的class？

    比如说想让name为banana的li背景色为黄色，并且name相同的li背景色都相同。

    name的数据是从后台获取的。

    目标效果图：

    图片描述

    <template>
<ul>
    <li v-for="(item, index) in myList" :class="{ active: isActive }">
       {{ item.name }}
     </li>
</ul>
</template>

<script>
data() {
      return {
          myList: [{
              name: apple
          },{
              name: orange
          },{
              name: banana
          },{
              name: orange
          },{
              name: apple
          }],
          isActive: false
      }
}
</script>

    初入门，思考了很久没有什么思路，烦请各路大神指点，谢谢了……

    javascripthtml5vue.js
    阅读 3.8k
    6 个回答
    得票最新
    头像
    monster
      14359
      ✓ 已被采纳

      name数据从后台获取的话也就是不确定会有啥名，建议在数据里面加上color数据值，{ name: 'apple' ,color:'red'}这样的话就不用去写那么多的if判断了，再或者如楼上所说的直接把name当类名，不过这就要求你事先知道name的值

      头像
      拾指相扣
        3.3k2417

        li的class这样写
        :class="{ 'yellow': item.name === 'banana', 'orange': item.name === 'orange', ... }"

        头像
        innlym
          57727

          :class="[item.name]"

          头像
          linong
            29.2k1266132

            诺就是这样咯？文档地址

            clipboard.png

            当然你的是直接颜色用：style也是极好

            clipboard.png

            头像
            waitTu
              483

              用vue 的v-bind:style

              <li v-for="(item, index) in myList" :style="{'backgroundColor':item.name}">
          {{ item.name }}
        </li>

              这样颜色值不能出错的，不然没有效果

              头像
              叶不修
                6011110

                那就直接把name当类名吧

                <!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8" />
    <title>webpack-vue</title>
    <style>
        [v-cloak] {
            display: none;
        }
        .apple {
            background-color: red;
        }
        .orange {
            background-color: orange;
        }
        .banana {
            background-color: yellow;
        }
    </style>
</head>

<body>
    <div id="app" v-cloak>
        <ul>
            <li v-for="(item, index) in myList" :class="[item.name, { active: isActive }]">
               {{ item.name }}
             </li>
        </ul>
    </div>

    <script src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"></script>
    <script>
        new Vue({
            el: '#app',
            data: {
              myList: [{
                  name: 'apple'
              },{
                  name: 'orange'
              },{
                  name: 'banana'
              },{
                  name: 'orange'
              },{
                  name: 'apple'
              }],
              isActive: false
            }
        })
    </script>
</body>

</html>
                撰写回答
                你尚未登录，登录后可以
                • 和开发者交流问题的细节
                • 关注并接收问题和回答的更新提醒
                • 参与内容的编辑和改进，让解决方法与时俱进
                推荐问题