Question

有人能告诉我我做错了什么吗？我试图基于在数据模型中是否显示是或否来绑定类。我已经尝试了条件绑定，但是我猜想我可能错过了一个参数或者错误的方法。

我错过了什么？我希望css January类绑定到表。如果v-bind已经存在，如何触发v-？

由于

<!DOCTYPE html>
<html>

<head>
    <style>
        table,
        th,
        td {
            border: 1px solid black;
        }

        th {
            width: 100px;
            height: 100px;
            background-color: yellow;
        }

        td {
            background-color: grey;
        }
        .January{
            background-color: pink;
        }

    </style>
</head>

<body>

    <table>
        <div id="cal">

            <tr>
                <th>Month</th>
                <th>Savings</th>
                <th>Spent</th>
            </tr>
            <tr>
                <td v-bind:class="{'January':yes}">January</td>
                <td>$100</td>
                <td>$10</td>
            </tr>
            <tr>
                <td>February</td>
                <td>$80</td>
                <td>$300</td>
            </tr>

            <tr>
                <td>March</td>
                <td>$80</td>
                <td>$0</td>
            </tr>
            <script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

            <script>
                new Vue({
                    el: '#cal',
                    data: {
                
                        January:'yes',
                        February:'yes',
                        March:'yes',
                        April:'yes',
                        May:'yes',
                        June:'yes',
                        July:'yes',
                        August:'yes',
                        September:'yes',
                        October:'yes',
                        November:'yes',
                        December:'yes'
                    }
                })

            </script>
        </div>
    </table>


</body>

</html>

Answer 1

因此，:class绑定传递的是{css_class : someThingThatResolvesToTrueOrFalse}

对象

所以你可以做类似

的事情

<td v-bind:class="{'January': January == 'yes'}">January</td>

更好的方法是用bool替换yes并判断该值而不是比较。

这是您的代码更新。

＆＃13;

new Vue({
  el: '#cal',
  data: {

    January: 'yes',
    February: 'yes',
    March: 'yes',
    April: 'yes',
    May: 'yes',
    June: 'yes',
    July: 'yes',
    August: 'yes',
    September: 'yes',
    October: 'yes',
    November: 'yes',
    December: 'yes'
  }
})

＆＃13;

table,
th,
td {
  border: 1px solid black;
}

th {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.js"></script>
<div id="cal">

  <table>

    <tr>
      <th>Month</th>
      <th>Savings</th>
      <th>Spent</th>
    </tr>
    <tr>
      <td v-bind:class="{'January':January == 'yes'}">January</td>
      <td>$100</td>
      <td>$10</td>
    </tr>
    <tr>
      <td>February</td>
      <td>$80</td>
      <td>$300</td>
    </tr>

    <tr>
      <td>March</td>
      <td>$80</td>
      <td>$0</td>
    </tr>
  </table>
</div>


</body>

</html>

＆＃13;

vuejs条件绑定基于数据的类

1 个答案: