Laravel 5 vue.js在单选按钮上切换类单击

我刚刚启动了Vue.js，但应该看到的足够简单的东西不起作用

我有2个单选按钮，根据点击的是哪一个，我想更改一个字体图标。单击“是”时，我想添加类别fa检查，单击“否”时，添加类别fa时间

---

对于条件类，有一种特定于Vue的语法，如数组类：

这样，lcb将被检查的无线电值替换，类将相应地更新

---

jsIDLE:

使用计算属性：

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

<input type="radio" name="test"  :value="true" v-model="showcheck"/>

在html中使用：

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

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

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

<input type="radio" name="test"  :value="true" v-model="showcheck"/>

---

这是一个。

这个不需要任何方法来处理单击事件

<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>

---

可以在i上设置默认类吗？@AdRock当然可以，只需将数据中的lcb更改为所需的类，例如lcb:'fa check'，。

<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>