Element UI实战教程之复选框组件04

Element UI实战教程之复选框组件04

checkbox组件

1.创建checkbox组件

 <el-checkbox v-model="checked">上海</el-checkbox>
  <el-checkbox v-model="checked">天津</el-checkbox>

2.checkbox组件属性的使用

<el-checkbox v-model="checked" true-label="北京">北京</el-checkbox>
  <el-checkbox v-model="checked">上海</el-checkbox>
  <el-checkbox v-model="checked">天津</el-checkbox>
<script>
    export default {
        name: "Checkbox",
      data(){
          return{
            checked: "北京"
          }
      }
    }
</script>

3.复选框组组件的使用

 <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 label="禁用" disabled></el-checkbox>
    <el-checkbox label="选中且禁用" disabled></el-checkbox>
  </el-checkbox-group>
<script>
  export default {
    data () {
      return {
        checkList: ['选中且禁用','复选框 A']
      };
    }
  };
</script>