Question

我刚刚开始使用Vue.js，应该看到的很简单并不起作用。

我有2个单选按钮，根据哪个单击，我想更改字体真棒图标。当我点击是时我想添加课程fa-fa-times，当我点击否时，添加课程<div class="form-group"> <div class="col-sm-1"> <i class="fa fa-2x fa-check {{lcb}}"></i> </div> <label class="control-label col-sm-5">New Field</label> <div class="col-sm-3"> <div class="radio"> <label> <input type="radio" name="test" value="1" v-model="lcb" v-bind:value="check"> <span class="cr"><i class="cr-icon fa fa-circle"></i></span> Yes </label> </div> </div> <div class="col-sm-2"> <div class="radio"> <label> <input type="radio" name="test" value="0" v-model="lcb" v-bind:value="times"> <span class="cr"><i class="cr-icon fa fa-circle"></i></span> No </label> </div> </div> </div>

v-if

这会导致错误

使用未定义的常量lcb - 假设＆＃39; lcb＆＃39;

我也尝试过使用v-else和<script> var app = new Vue({ el: '#app', data: { lsb: false, check: 'fa-check', times: 'fa-times' } }); </script>，但这不起作用

我不知道这是否是正确的做法

{{1}}

Answer 1

条件类有一个特定于Vue的语法，如数组1：https://vuejs.org/v2/guide/class-and-style.html#Array-Syntax

<i v-bind:class="['fa', 'fa-2x', lcb]"></i>

这种方式lcb将被检查的无线电值替换，并且类将相应地更新。

JSFiddle：https://jsfiddle.net/yuriy636/1abceh49/

Answer 2

使用计算属性：

+------------+-----+---------+-------------+-------------+
| SalesOrder | sku | QtyOpen | PerOrderMax | NewOrderQty |
+------------+-----+---------+-------------+-------------+
| so1        | L06 |    1144 |         192 |         192 |
| so1        | L06 |     952 |         192 |         192 |
| so1        | L06 |     760 |         192 |         192 |
| so1        | L06 |     568 |         192 |         192 |
| so1        | L06 |     376 |         192 |         192 |
| so1        | L06 |     184 |         192 |         184 |
| so3        | S01 |     768 |         256 |         256 |
| so3        | S01 |     512 |         256 |         256 |
| so3        | S01 |     256 |         256 |         256 |
| so4        | S04 |     832 |         256 |         256 |
| so4        | S04 |     576 |         256 |         256 |
| so4        | S04 |     320 |         256 |         256 |
| so4        | S04 |      64 |         256 |          64 |
+------------+-----+---------+-------------+-------------+

在你的html使用中：

var app = new Vue({
  el: '#app',
  data: {
    showcheck: true,
  },
computed: {
  classObject: function () {
    return {
      'fa-check': this.showcheck,
      'fa-times': !this.showcheck
    }
  }
}})

并绑定到showcheck属性的复选框：

<i v-bind:class="classObject">msg</i>

这是working fiddle。

Answer 3

此事件不需要任何点击事件方法。

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary" v-bind:class="{ active: (this.showcheck === 'value1') }">
    <input type="radio" name="radioset" id="option1" v-model="showcheck" value="value1"> Option One
  </label>
  <label class="btn btn-secondary" v-bind:class="{ active: (this.showcheck === 'value2') }">
    <input type="radio" name="radioset" id="option2" v-model="showcheck" value="value2"> Option Two
  </label>
</div>

单击单选按钮上的vue.js切换类

3 个答案: