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

ram*_*226 3 vue.js vuejs2

我在项目中使用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;
}
}
})
Run Code Online (Sandbox Code Playgroud)

kri*_*lfa 9

显然,如果绑定值与输入值相同,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"
    }
})
Run Code Online (Sandbox Code Playgroud)

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

  • 帮助我意识到 `checked` 属性在初始化时没有设置 `v-model` 属性的值。谢谢。 (2认同)