element-ui switch

<el-tooltip :content="'Switch value: ' + value" placement="top">
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    active-value="100"
    inactive-value="0">
  </el-switch>
</el-tooltip>

<script>
  export default {
    data() {
      return {
        value: '100',
      }
    }
  };
</script>

　　设置active-value和inactive-value属性，接受Boolean, String或Number类型的值。

 

一般前后台关联场景使用情况下，注意inactive-value属性的参数类型。

比如后台返回int 类型，那么inactive-value的值就不能在前台加双引号，这样会引起类型错误，错误将会引起按钮不按实际情况控制。

<el-tooltip :content="'Switch value: ' + value" placement="top">
  <el-switch
    v-model="value"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value=activevalue
    inactive-value=iactivevalue>
  </el-switch>
</el-tooltip>

<script>
  export default {
    data() {
      return {

        value: '100',
        activevalue:100,
        iactivevalue:0
     } 
    }};

 </script>

　　假设后台返回值是string类型，如果没进行任何转换，那么给

activevalue赋值时将会失败，按钮不会被启动