vue中使用radio和checkbox
代码
<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>
做有积累的事~~