Question

如何在Vue.js中设置无线电条件？我想制作单选按钮取决于我从上面的代码中选择的特定对象。＆＃34;选择＆＃34;确实很好用，设置一个值很容易取决于我选择使用的对象：value =＆＃34; object.variable＆＃34;。如下所示

选择示例（它按条件=我选择的对象工作）：

<span class="select">
<select :value="object.variable">
 <option>true</option>
 <option>false</option>
</select>
</span>

（如果＆＃34; object.variable＆＃34;为真，则选择框显示为true。）

我的原始代码：

<div class="control">
 <label class="label">true_or_false</label>
 <input type="radio" name="picked" id="true" value="true" v-model="picked">
 <label for="true">True</label>
 <br>
 <input type="radio" name="picked" id="false" value="false" v-model="picked">
 <label for="false">False</label>
 <br>
 <span>Picked: {{ picked }}</span>
</div>

我想将上面的内容改为如下所示。

<div class="control" :value="object.variable">
 <label class="label">One or Two</label>
 <input type="radio" name="picked" id="true" value="true" v-model="picked">
 <label for="true">True</label>
 <br>
 <input type="radio" name="picked" id="false" value="false" v-model="picked">
 <label for="false">False</label>
 <br>
 <span>Picked: {{ picked }}</span>
</div>

我整天用Google搜索，但我没有找到任何相关信息。我不想为这个轻量级要求使用v-on，事件处理。和v-if不起作用。我不明白为什么＆＃34; radio＆＃34;不处理这些：/不像＆＃34;选择＆＃34;。

Answer 1

只需将object.variable设置为v-model的绑定表达式。像这样：

<div class="control">
 <label class="label">true_or_false</label>
 <input type="radio" name="picked" id="true" value="true" v-model="object.variable">
 <label for="true">True</label>
 <br>
 <input type="radio" name="picked" id="false" value="false" v-model="object.variable">
 <label for="false">False</label>
 <br>
 <span>Picked: {{ picked }}</span>
</div>

Vue.js：设置无线电类型的条件（单选按钮）

1 个答案: