Vue中v-bind:class条件绑定问题：false时仍应用CSS类

你遇到的问题主要来自两个关键错误：语法书写失误和不符合规范的DOM结构，二者共同导致了类的条件绑定失效。

1. 核心错误点 #

• v-bind:class语法错误：你写的v-bind: class（冒号与class之间有空格）会让Vue无法正确解析这个绑定指令，直接导致条件判断完全不起作用。正确写法是v-bind:class（无空格），或者更常用的简写:class。
• 无效的表格嵌套结构：把Vue根元素<div id="cal">直接放在<table>内部违反了HTML规范——<table>的直接子元素只能是<thead>、<tbody>、<tr>这类表格专属元素。这个错误会导致Vue实例无法正确挂载到目标节点，数据绑定自然无法正常工作。

2. 修正后的完整代码 #

HTML部分 #

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<div id="cal">
  <table>
    <tr>
      <th>Jan</th>
      <th>Feb</th>
      <th>Mar</th>
      <th>Apr</th>
      <th>May</th>
      <th>Jun</th>
      <th>Jul</th>
      <th>Aug</th>
      <th>Sep</th>
      <th>Oct</th>
      <th>Nov</th>
      <th>Dec</th>
    </tr>
    <tr>
      <td :class="{'January': January === 'yes'}">askjdldsaa</td>
      <td :class="{'February': February === 'yes'}"></td>
      <td :class="{'March': March === 'yes'}"></td>
      <td :class="{'April': April === 'yes'}"></td>
      <td :class="{'May': May === 'yes'}"></td>
      <td :class="{'June': June === 'yes'}"></td>
      <td :class="{'July': July === 'yes'}"></td>
      <td :class="{'August': August === 'yes'}"></td>
      <td :class="{'September': September === 'yes'}"></td>
      <td :class="{'October': October === 'yes'}"></td>
      <td :class="{'November': November === 'yes'}"></td>
      <td :class="{'December': December === 'yes'}"></td>
    </tr>
  </table>
</div>

JS部分 #

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

CSS部分（保持不变） #

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

3. 额外优化建议 #

• 把月份数据改成布尔值（true/false），条件判断会更简洁：比如January: false，绑定的时候直接写:class="{'January': January}"，代码可读性更高。
• 对于重复的绑定逻辑，可以用v-for遍历月份数组生成<td>元素，避免冗余代码，后续维护也更方便。

内容的提问来源于stack exchange，提问作者Vzupo