el-radio
をテンプレートにして作成
[
トップ
] [
新規
|
一覧
|
検索
|
最終更新
|
ヘルプ
|
ログイン
]
開始行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 使用 el-radio [#kd9d4285]
示例一：
#codeprettify{{
<el-form-item label="性别">
<el-radio-group v-model="form.gender" style="margin-bot...
<el-radio label="false">男</el-radio>
<el-radio label="true">女</el-radio>
</el-radio-group>
</el-form-item>
}}
示例二：
#codeprettify{{
<el-table ref="sensorTable" :data="tableData" tooltip-eff...
<el-table-column label="选择" width="55">
<template slot-scope="scope">
<el-radio v-model="tableRadio" :label="scope.row">...
</template>
</el-table-column>
}}
* 不使用 el-radio [#f310edd0]
** 使用v-for循环的radio单选框 [#c44a2819]
#codeprettify{{
<template>
<div>
<label v-for="(item, index) in radioData" :key="index">
<input type="radio" v-model="radioVal" :value="item.va...
\{\{ item.value \}\}
</label>
</div>
</template>
<script>
export default {
data() {
return {
radioData: [
{ value: '全部' },
{ value: '部分' },
{ value: '零散' }
],
radioVal: '全部' // 用于设置默认选中项
};
},
methods: {
getRadioVal() {
console.log(this.radioVal);
}
}
};
</script>
}}
** 不使用v-for循环的radio单选框 [#gd4deecc]
#codeprettify{{
<template>
<div>
<label><input v-model="radioVal" type="radio" value="全...
<label><input v-model="radioVal" type="radio" value="部...
<label><input v-model="radioVal" type="radio" value="零...
</div>
</template>
<script>
export default {
data() {
return {
radioVal: '全部' // 用于设置默认选中项
};
},
methods: {
getRadioVal() {
console.log(this.radioVal);
}
}
};
</script>
}}
#hr();
コメント：
#comment_kcaptcha
終了行:
[[Vue]]
&color(red){※前提条件：本文基于 Vue 2.0 创作};
#contents
* 使用 el-radio [#kd9d4285]
示例一：
#codeprettify{{
<el-form-item label="性别">
<el-radio-group v-model="form.gender" style="margin-bot...
<el-radio label="false">男</el-radio>
<el-radio label="true">女</el-radio>
</el-radio-group>
</el-form-item>
}}
示例二：
#codeprettify{{
<el-table ref="sensorTable" :data="tableData" tooltip-eff...
<el-table-column label="选择" width="55">
<template slot-scope="scope">
<el-radio v-model="tableRadio" :label="scope.row">...
</template>
</el-table-column>
}}
* 不使用 el-radio [#f310edd0]
** 使用v-for循环的radio单选框 [#c44a2819]
#codeprettify{{
<template>
<div>
<label v-for="(item, index) in radioData" :key="index">
<input type="radio" v-model="radioVal" :value="item.va...
\{\{ item.value \}\}
</label>
</div>
</template>
<script>
export default {
data() {
return {
radioData: [
{ value: '全部' },
{ value: '部分' },
{ value: '零散' }
],
radioVal: '全部' // 用于设置默认选中项
};
},
methods: {
getRadioVal() {
console.log(this.radioVal);
}
}
};
</script>
}}
** 不使用v-for循环的radio单选框 [#gd4deecc]
#codeprettify{{
<template>
<div>
<label><input v-model="radioVal" type="radio" value="全...
<label><input v-model="radioVal" type="radio" value="部...
<label><input v-model="radioVal" type="radio" value="零...
</div>
</template>
<script>
export default {
data() {
return {
radioVal: '全部' // 用于设置默认选中项
};
},
methods: {
getRadioVal() {
console.log(this.radioVal);
}
}
};
</script>
}}
#hr();
コメント：
#comment_kcaptcha
ページ名:
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
