单项框 复选框

一.复选框的使用

<template>
<div>
   {
   {checkList}}
     <el-checkbox-group v-model="checkList">
    <el-checkbox label="复选框 A"></el-checkbox>
    <el-checkbox label="复选框 B"></el-checkbox>
    <el-checkbox label="复选框 C"></el-checkbox>
  </el-checkbox-group>
</div>

</template>

<script>
  export default {
    data () {
      return {
        checkList: []
      };
    }
  };
</script>

解析:

v-model绑定是一个数组,选中的项都会在这个数组里面。

二.单选框的使用

<template>
  <el-radio-group v-model="radio">
    <el-radio :label="3">备选项</el-radio>
    <el-radio :label="6">备选项</el-radio>
    <el-radio :label="9">备选项</el-radio>
  </el-radio-group>
</template>

<script>
  export default {
    data () {
      return {
        radio: 6
      };
    }
  }
</script>

通过v-model进行关联，双向绑定一个值。

值与label进行对应,选中的值是多少就显示多少。