鍍金池/ 問答/HTML/ vue v-for循環(huán)動態(tài)設(shè)置類名問題?

vue v-for循環(huán)動態(tài)設(shè)置類名問題?

我想根據(jù)arr數(shù)組里面的item => color數(shù)組的state的值來設(shè)置active類名,如果color數(shù)組的里面元素的state值都為1,則active為true

<!DOCTYPE html>
<html lang="zh-cn">
  <head>
    <title></title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <style>
      .list li {
        color: bisque;
      }
      .list li.active {
        color: blueviolet;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <ul class="list">
        <li :class="{'active': item.status == 1}" v-for="item in arr" :key="item.id">
          <p>{{item.color}}</p>
          <p>{{ item.name }}</p>
        </li>
      </ul>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script>
      var app = new Vue({
        el: '#app',
        data: {
          arr: [
            {
              id: 0,
              name: '11111',
              status: 0,
              color: [
                {
                  text: 'wewee',
                  state: 0
                },
                {
                  text: 'wewee',
                  state: 1
                },
              ]
            },
            {
              id: 1,
              name: '2222',
              status: 1,
              color: [
                {
                  text: 'wewee',
                  state: 0
                },
                {
                  text: 'wewee',
                  state: 1
                },
              ]
            },
            {
              id: 2,
              name: '3333',
              status: 1,
              color: [
                {
                  text: 'wewee',
                  state: 0
                },
                {
                  text: 'wewee',
                  state: 0
                },
              ]
            },
            {
              id: 3,
              name: '4444',
              status: 0,
              color: [
                {
                  text: 'wewee',
                  state: 1
                },
                {
                  text: 'wewee',
                  state: 1
                },
              ]
            }
          ]
        }
      })
    </script>
  </body>
</html>

clipboard.png

如果arr數(shù)組的某一項中,color數(shù)組中每一項的state都為1,則選中.求大神!!!

回答
編輯回答
情已空

{'active': item.color.every(item => item.status === 1)}

2017年11月15日 19:47