时间戳

首页 > 解决方案 > v-bind 类中的三元运算符用法

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

问题描述

所以我正在使用 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>

标签： vue.js

解决方案

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

然而，这有效：

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

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

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

推荐阅读