ElementUI学习 Radio Checkbox

Radio

通常和v-model绑定使用

<template>
  <div class="temp">
    <el-row>
      <el-radio v-model="sex" label="1" >男</el-radio>
      <el-radio v-model="sex" label="2" >女</el-radio>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "temp",
        data() {
          return {
            sex: '1'
          }
        }
    }
</script>

<style>
    
</style>

效果:由于sex默认值和男对应 所以默认选择到男

禁用效果

单选框组

@change

传递一个方法进去,在点击时即会执行改方法

<template>
  <div class="temp">
    <el-row>
      <el-radio-group v-model="sex" @change="radiochange">
        <el-radio :label="1">男</el-radio>
        <el-radio :label="2">女</el-radio>
      </el-radio-group>
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "temp",
        data() {
          return {
            sex: '1'
          }
        },
        methods : {
          radiochange(e){
            console.log(e)
          }
        }
    }
</script>

<style>
    
</style>

Checkbox 多选框

一样使用v-model绑定 同时注意数据类型应该是数组
其他基本是radio一致

<template>
  <div class="temp">
    <el-row>
      <el-checkbox-group v-model="checkList" @change="change">
        <el-checkbox label="音乐"></el-checkbox>
        <el-checkbox label="体育"></el-checkbox>
        <el-checkbox label="运动"></el-checkbox>
      </el-checkbox-group>
      
    </el-row>
  </div>
</template>

<script>
    export default {
        name: "temp",
        data() {
          return {
            checkList: ['音乐','体育']
          }
        },
        methods : {
          change(e){
            console.log(e)
          }
        }
    }
</script>

<style>
    
</style>