Question

我有一个简单的代码：

    <div id="app">
<div class="xyz" :class="{ selectedRadio:radio_first }">
  <input type="radio" name="example" @change="radio_first = true;radio_second = false">
</div>

<div class="abc" :class="{ selectedRadio:radio_second }">
  <input type="radio" name="example" @change="radio_second = true;radio_first = false">
</div>
</div>

然后：

    new Vue({

      el:"#app",
      data:{
        radio_first:false,
        radio_second:false
      }


});

CSS：

    .xyz{
  display:inline;
  padding:20px;
  border:1px solid grey;
  margin-right:60px;
}

.abc{
  border:1px solid grey;
  display:inline;
  padding:20px;
}

.selectedRadio{
    background: lightgreen;
}

因此，如果我检查第一个单选按钮，我只想将新类添加到其父div。如果我检查第二个收音机，我需要在其父div中添加一个类，并将第一个添加的类删除到第一个收音机父div。我希望你们明白我的意思。到目前为止我已经尝试过了。它正在工作，但如果我有很多单选按钮怎么办？在vue js中有更好的方法来解决这个问题。这是codepen链接：https://codepen.io/kohalirakesh/pen/KoPMEZ 谢谢。

Answer 1

喜欢这个？ Example on Codesandbox

您基本上想要使用:class，例如：

<div class="parent" :class="{'green': radio}">
  <input type="radio" v-model="radio" :value="true"/> True
</div>
<div class="parent" :class="{'red': !radio}">
  <input type="radio" v-model="radio" :value="false"/> False
</div>

您可以在官方Vue文档中阅读更多相关信息：

Vue Documentation on Class and Style Bindings

如何在vuejs中的更改单选按钮上添加/删除父div中的类

1 个答案: