Vue.js条件绑定CSS类问题求助：绑定失败原因排查

先帮你拆解下遇到的两个核心问题：类绑定不生效，以及v-bind和v-if的配合使用，咱们一步步来解决：

1. 类绑定不生效的原因及修复 #

你的代码里有两个关键错误导致绑定失效：

• 变量名不匹配：你在data里定义的是January: 'yes'，但绑定类时用的是yes，Vue根本找不到这个变量！应该直接引用data里对应的属性名（也就是January）。另外，类绑定的条件建议用布尔值（true/false）而非字符串，这更符合Vue的设计逻辑，也更直观。
• DOM结构不合法：你把<div id="cal">直接放在了<table>内部，这违反了HTML规范——<table>的直接子元素只能是<thead>、<tbody>、<tr>这类表格专属元素，错误的DOM结构会导致Vue指令无法正常工作。可以把id="cal"直接加到<table>标签上，或者把div移到table外部。

修正后的核心代码片段 #

<!-- 把挂载目标id直接加到table上，修正DOM结构 -->
<table id="cal">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Spent</th>
  </tr>
  <!-- 用data里的January属性作为类绑定的判断条件 -->
  <tr>
    <td v-bind:class="{'January': January}">January</td>
    <td>$100</td>
    <td>$10</td>
  </tr>
  <!-- 其他月份同理 -->
</table>

<script>
new Vue({
  el: '#cal',
  data: {
    // 改成布尔值更规范，true时绑定类，false时不绑定
    January: true,
    February: false,
    March: true,
    // ...其他月份
  }
})
</script>

修改后，当January为true时，.January类就会被绑定到对应单元格，背景色会变成粉色。

2. v-bind和v-if的配合使用 #

这两个指令完全可以同时作用在同一个元素上，没有冲突：

• 如果你的需求是仅当条件为真时显示元素，同时给它绑定类，可以这么写：

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

这里v-if负责控制元素的显示/隐藏，v-bind:class负责条件绑定CSS类，两者各司其职、互不影响。

• 如果你只是想绑定类而不需要隐藏元素，单独使用v-bind:class就足够了，不需要额外加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>
<!-- 修正DOM结构，将挂载目标id加到table上 -->
<table id="cal">
  <tr>
    <th>Month</th>
    <th>Savings</th>
    <th>Spent</th>
  </tr>
  <tr>
    <td v-bind:class="{'January': January}">January</td>
    <td>$100</td>
    <td>$10</td>
  </tr>
  <tr>
    <td v-bind:class="{'February': February}">February</td>
    <td>$80</td>
    <td>$300</td>
  </tr>
  <tr>
    <td v-bind:class="{'March': March}">March</td>
    <td>$80</td>
    <td>$0</td>
  </tr>
</table>

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>
<script>
new Vue({
  el: '#cal',
  data: {
    January: true,
    February: false,
    March: true,
    April: true,
    May: true,
    June: true,
    July: true,
    August: true,
    September: true,
    October: true,
    November: true,
    December: true
  }
})
</script>
</body>
</html>

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