代码
<template>
<div id="app">
<input type="checkbox" v-model="v2" value="a">
<input type="checkbox" v-model="v2" value="b">
<input type="checkbox" v-model="v2" value="c">
{{v2}}
<input type="radio" name="love" v-model="v3" value="aa">
<input type="radio" name="love" v-model="v3" value="bb">
{{v3}}
</div>
</template>
<script>
export default {
data () {
return {
v2: ['a', 'b'],
v3: 'aa'
}
}
}
</script>
在checkbox中,当value值在v2数组中能查询到,改checkbox就是选中状态,当对checkbox进行操作时,v2数组也同样变化
在radio中,由于只能有一项选中,所以v3是一个字符串,value值和其相等的就会被选中
vue中使用radio参考示例
<template>
<div>
<el-radio-group v-model='checked' @change="updateChecked">
<el-radio :disabled='!readOnly' label="1">使用</el-radio> #绑定的是字符串的值 "1",如果想绑定为整形,使用:lable,看下面的例子
<el-radio :disabled='!readOnly' label="0">未使用</el-radio>
</el-radio-group>
</div>
</template>
<script>
import { updateBasicInfo } from "@/api/service"
export default {
props: {
readOnly: {
type: Boolean,
default: false
},
basic_info: {
type: Object,
default: () => {}
},
node_key: String,
},
data () {
return {
checked: ''
}
},
watch: {
basic_info() {
this.checked = this.basic_info.http_dns
},
basic_info() {
if (this.basic_info.http_dns) {
this.checked = this.basic_info.http_dns
} else {
this.checked = '0'
}
}
},
methods: {
updateChecked(val) {
this.basic_info['http_dns'] = val
updateBasicInfo({'node_key': this.node_key, 'basic_info':this.basic_info}).then(() => {
this.$notify({
message: "更新成功",
type: "success",
duration: 500
});
}).catch(error => {
console.log(error)
})
}
},
mounted() {
this.checked = ''
}
}
</script>
<style scoped>
</style>
radio选中的值绑定整形例子
<el-form-item label="高可用部署" prop="haFlag"> <el-radio-group v-model.trim="formTemp.haFlag"> <el-radio :label=1>是</el-radio> <el-radio :label=0>否</el-radio> </el-radio-group> </el-form-item>