用v-for渲染列表，如何根據(jù)li的內容改變表格某一個li的class？

比如說想讓name為banana的li背景色為黃色，并且name相同的li背景色都相同。

name的數(shù)據(jù)是從后臺獲取的。

目標效果圖：

圖片描述

<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>

初入門，思考了很久沒有什么思路，煩請各路大神指點，謝謝了……

回答

編輯回答

奧特蛋

:class="[item.name]"

2017年9月16日 20:16

編輯回答

不歸路

li的class這樣寫
:class="{ 'yellow': item.name === 'banana', 'orange': item.name === 'orange', ... }"

2017年8月12日 01:27

編輯回答

礙你眼

name數(shù)據(jù)從后臺獲取的話也就是不確定會有啥名，建議在數(shù)據(jù)里面加上color數(shù)據(jù)值，{ name: 'apple' ,color:'red'}這樣的話就不用去寫那么多的if判斷了，再或者如樓上所說的直接把name當類名，不過這就要求你事先知道name的值

2017年1月6日 12:17

編輯回答

我甘愿

用vue 的v-bind:style

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

這樣顏色值不能出錯的，不然沒有效果

2018年5月14日 20:06

編輯回答

懶豬

諾就是這樣咯？文檔地址

當然你的是直接顏色用：style也是極好

2017年9月11日 18:28

編輯回答

喵小咪

那就直接把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>

2017年5月25日 04:44