vue中使用radio和checkbox

左手的ㄟ右手 2023-06-03 10:54 14阅读 0赞

代码

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

转载于:https://www.cnblogs.com/robinunix/p/11393429.html