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

1tuwyuhd  于 2023-01-14  发布在  Vue.js
关注(0)|答案(3)|浏览(210)

当页面加载,单选按钮状态应检查状态需要,之后在改变单选按钮,波纹管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;
}
}
})
nhaq1z21

nhaq1z211#

显然,如果边界值与输入值相同,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"
    }
})

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

o8x7eapl

o8x7eapl2#

现在我们必须在两个条件中进行选择。所以我们应该使用输入无线电组。

<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,
        ...
    }
}
yeotifhr

yeotifhr3#

在您在html输入值中提供的男性出现两次的情况下没有意义,因为vue.js模型完全依赖于输入值来确定script部分下的数据方法中的v-model值,如果您打算在男性和女性之间切换,则可以在其中一个输入字段中添加女性。您也不需要v-bind:checked="checked",因为vue.js确定了您将在数据函数中指定并返回的v模型(性别)中的默认选定单选项,以下是您可以在输入单选字段中进行的更改,

<div id="demo">
  <input type="radio" value="male" v-model="gender"/>
   <input type="radio" value="female" v-model="gender"  />
</div>

最后,您可以在脚本部分的data函数中添加以下内容:

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

和以上函数数据选项是最佳实践,而不是

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

,出于组件可重用性原因

相关问题