Question

我正在使用vueJs并有一个单选按钮组。检查无线电时如何将css border属性绑定到类:class="selected"？

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

因此，如果检查无线电，则将一个类（选定）绑定到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"影响不大。

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

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

.selected { border: 1px solid red; }

<script src="https://unpkg.com/vue"></script>

<div id="app">
  <div class="sau-select lg center" :class="{selected: selectedOs === 'windows'}">
    <label for="windows">
      <input type="radio" id="windows" value="windows" v-model="selectedOs" :checked="checked">
      Windows
    </label>
  </div>
    <div class="sau-select lg center" :class="{selected: selectedOs === 'linux'}">
    <label for="linux">
      <input type="radio" id="linux" value="linux" v-model="selectedOs" :checked="checked">
      Linux
    </label>
  </div>
</div>

VueJs Checked单选按钮组

1 个答案: