VueJs Checked 单选按钮组

Question

我正在使用 vueJs 并且有一个单选按钮组。检查收音机时，如何将 css 边框属性绑定到 :class="selected" 类？

:checked 属性不起作用，因为我已将其绑定到 v-model。

因此，如果选中收音机，则将一个类（选定的）绑定到 div。

<div class="sau-select lg center" :class="selected">
   <label for="windows">
      <input type="radio" id="windows" value="windows" v-model="selectedOs" :checked="checked">
      <span></span>
      <img src="/img/windows.gif" alt="Windows">Windows
   </label>
</div>

Answer 1

你使用的:class="selected"没有太大作用。

要有条件地将类应用于div，如果selectedOs 等于每个<input> 的value 属性，则必须使用:class 条件，例如:class="{redborder: selectedOs === 'windows'}"。更多细节在下面的演示中：

new Vue({
  el: '#app',
  data: {
    selectedOs: 'windows'
  }
})

.redborder { border: 1px solid red; }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <label :class="{redborder: selectedOs === 'windows'}">
    <input type="radio" value="windows" v-model="selectedOs"> Windows
  </label>

  <label :class="{redborder: selectedOs === 'linux'}">
    <input type="radio" value="linux" v-model="selectedOs"> Linux
  </label>
</div>

注意value="linux" 表示该单选框会将字符串"linux" 分配给v-model 变量（在本例中为selectedOs）。例如，value="linux" 等价于 :value="'linux'"。