Question

我在项目中使用VueJs，当页面加载无线电按钮状态应该检查状态需要，之后更改单选按钮，下面的div应该隐藏和显示。我写了下面的代码，但它不起作用：

html
----
<div id="demo">
  <input type="radio" value="male" v-model="male" v-bind:checked="checked" />
   <input type="radio" value="male" v-model="male" v-bind:checked="unchecked" />
</div>

javascript
---------
new Vue({
    el: '#demo',
  data: {
    checked: true
  },
methods:{
  onChange:function(){
   checked=false;
}
}
})

Answer 1

显然，如果绑定值与输入值相同，Vue将检查输入：

看看这个小提琴：https://jsfiddle.net/v7zj4c13/188/

<input type="radio" name="gender" value="female" v-model="gender"/>
<input type="radio" name="gender" value="male" v-model="gender"/>

new Vue({
    el: '#demo',
    data: {
        gender: "female"
    }
})

上面的代码将检查女性输入，而不是男性输入

Answer 2

现在我们必须在2个条件之间进行选择。因此，我们应该使用输入广播组。

<b-form-radio-group v-model="gender">
    <input type="radio" value="female"/>
    <input type="radio" value="male"/>
</b-form-radio-group>

您可以将“女性”或“男性”设置为变量“性别”的初始值。

data() {
    return {
        ...
        gender: 'female',
        ...
    }
}

如果将单选按钮用作单个元素，而不用作组元素。其v-model变量必须唯一，我们也可以将其设置为默认选中的选项。

<input type="radio" value="female" v-model="gender"/>
<input type="radio" value="1" v-model="isOnline"/>

data() {
    return {
        ...
        gender: 'female',
        isOnline: 0,
        ...
    }
}

如何在vuejs中默认选中单选按钮？

2 个答案: