Question

所以我正在使用vuejs并尝试添加一个三元运算符或不强制v-bind类应用的东西。即使数据为false，它仍然应用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在今天的答案中适当地切换课程。

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

2 个答案: