您的位置:首页 > Web前端 > Vue.js

vue如何默认选中单选框

2018-06-04 16:16 1316 查看

一般我们使用单选框,会这么写:

//HTML

<input type="radio" name="radios" value="1" checked><label>one</label>

<input type="radio" name="radios" value="2"><label>two</label>

<input type="radio" name="radios" value="2"><label>three</label>

有”checked”属性的单选框会默认选中。但在vue里这是无效的,因为它会跟具体的参数值绑定。(后来看到vue的官网教程,确实写了这么一段:v-model 会忽略所有表单元素的 value、checked、selected 特性的初始值。因为它会选择 Vue 实例数据来作为具体的值。你应该通过 JavaScript 在组件的 data 选项中声明初始值。)

//HTML

<input type="radio" name="radios" value="1" v-model="param"><label>one</label>

<input type="radio" name="radios" value="2" v-model="param"><label>two</label>

<input type="radio" name="radios" value="3" v-model="param"><label>three</label>

//JS

export default{

data(){

return{

param:'1' //设置默认值为1,即设置第一个单选框为选中状态

}

}}

阅读更多
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: