VueJs Checked 单选按钮组

Posted 2023-02-22

【中文标题】VueJs Checked 单选按钮组

【英文标题】：VueJs Checked Radio Button group

【发布时间】：2018-08-24 22:58:43

【问题描述】：

我正在使用 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" >Windows
   </label>
</div>

【问题讨论】：

类名是什么？

.selected，我已经更新了问题

【参考方案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'"。

【讨论】：

两个输入中都需要 :checked="checked" 吗？

我不认为这有什么区别，所以，没有。要控制它们是否被检查，selectedOs 的值应该与每个相应的value 属性匹配。