v-bind 类中的三元运算符用法

Question

所以我正在使用 vuejs 并尝试添加三元运算符或不会强制应用 v-bind 类的东西。即使数据是假的，它仍然应用 css 类。如何防止这种情况发生？

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

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

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

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>


<table>
  <div id="cal">

    <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 v-bind: class="{'January' : January == 'yes' }">askjdldsaa</td>
      <td v-bind: class="{'February' : February == 'yes'}"></td>
      <td v-bind: class="{'March' : March == 'yes'}"></td>
      <td v-bind: class="{'April' : April == 'yes'}"></td>
      <td v-bind: class="{'May' : May == 'yes'}"></td>
      <td v-bind: class="{'June' : June == 'yes'}"></td>
      <td v-bind: class="{'July' : July == 'yes'}"></td>
      <td v-bind: class="{'August' : August == 'yes'}"></td>
      <td v-bind: class="{'September' : September == 'yes'}"></td>
      <td v-bind: class="{'October' : October == 'yes'}"></td>
      <td v-bind: class="{'November' : November == 'yes'}"></td>
      <td v-bind: class="{'December' : December == 'yes'}"></td>

    </tr>



  </div>
</table>

我已更新示例以显示应用条件的问题。即使我将数据更改为“否”，它仍然会呈现粉色框。

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

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

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

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<script type="text/javascript" src="https://unpkg.com/vue@2.0.3/dist/vue.js"></script>

<table>
  <div id="cal">

    <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 v-bind: class="{'January' : January == 'yes' }">askjdldsaa</td>
      <td v-bind: class="{'February' : February == 'yes'}"></td>
      <td v-bind: class="{'March' : March == 'yes'}"></td>
      <td v-bind: class="{'April' : April == 'yes'}"></td>
      <td v-bind: class="{'May' : May == 'yes'}"></td>
      <td v-bind: class="{'June' : June == 'yes'}"></td>
      <td v-bind: class="{'July' : July == 'yes'}"></td>
      <td v-bind: class="{'August' : August == 'yes'}"></td>
      <td v-bind: class="{'September' : September == 'yes'}"></td>
      <td v-bind: class="{'October' : October == 'yes'}"></td>
      <td v-bind: class="{'November' : November == 'yes'}"></td>
      <td v-bind: class="{'December' : December == 'yes'}"></td>

    </tr>


  </div>
</table>

Answer 1

好吧，您提供的代码不是有效的 Javascript 表达式，所以我怀疑它是否会运行...

但是这有效：

v-bind:class="{'January' : January == 'yes' }

根本不需要三元运算符。如果您想渲染一个类或另一个类，您只会使用三元运算符。在这种情况下，不使用对象而是使用数组（如果有多个表达式）

v-bind:class="['staticClass', january = 'yes' ? 'isJanuary' : 'notJanuary']"

Answer 2

您构建模板的方式存在一些问题（我在the answer to your previous question 中修复了这些问题）。

首先，您不能像这里那样在表中嵌套div：

<table>
    <div id="cal">
    ...
    </div>
</table>

第二，这里不能有空格v-bind: class。

这是你的代码清理和工作。

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

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

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

td {
  background-color: grey;
}

.January {
  background-color: pink;
}

<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 v-bind:class="{'January' : January == 'yes' }">askjdldsaa</td>
      <td v-bind:class="{'February' : February == 'yes'}"></td>
      <td v-bind:class="{'March' : March == 'yes'}"></td>
      <td v-bind:class="{'April' : April == 'yes'}"></td>
      <td v-bind:class="{'May' : May == 'yes'}"></td>
      <td v-bind:class="{'June' : June == 'yes'}"></td>
      <td v-bind:class="{'July' : July == 'yes'}"></td>
      <td v-bind:class="{'August' : August == 'yes'}"></td>
      <td v-bind:class="{'September' : September == 'yes'}"></td>
      <td v-bind:class="{'October' : October == 'yes'}"></td>
      <td v-bind:class="{'November' : November == 'yes'}"></td>
      <td v-bind:class="{'December' : December == 'yes'}"></td>
    </tr>
  </table>
</div>

一旦你解决了这些问题，然后是基本的类绑定

v-bind:class="{'January' : January == 'yes' }"

您是否只需要按照昨天对您的问题的回答和今天的回答中@LinusBorg 的建议适当地切换课程。