vue中使用radio和checkbox

代码

<template>
  <div >
    <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>

vue中使用radio和checkbox

相关推荐