vuejs根据数据条件绑定一个类

Question

vuejs根据数据条件绑定一个类

有人可以告诉我我在做什么错吗？我试图根据是否在数据模型中显示是或否来绑定该类。我已经尝试过条件绑定，但是猜测也许我缺少参数或以错误的方式进行操作。

我想念什么？我希望CSS一月类绑定到表。如果v-bind已经存在，如何触发v-if？

谢谢

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

Run Code Online (Sandbox Code Playgroud)

Answer 1

Mar*_*ert 5

因此，对于:class绑定，您传入一个对象{css_class : someThingThatResolvesToTrueOrFalse}

所以你可以做类似的事情

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

Run Code Online (Sandbox Code Playgroud)

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

这是您的代码更新。

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

Run Code Online (Sandbox Code Playgroud)

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'
  }
})

Run Code Online (Sandbox Code Playgroud)

table,
th,
td {
  border: 1px solid black;
}

th {
  width: 100px;
  height: 100px;
  background-color: yellow;
}

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

Run Code Online (Sandbox Code Playgroud)

归档时间：	7 年，8 月前
查看次数：	2988 次
最近记录：	7 年，8 月前