Element ui中el-switch的数据回显

Element ui中Switch给了四个模板，这个模板应该是比较常用点的

看起来简单好用，但对于第一次用这个组件的人（比如我）来说是有点坑在里面的，下面根据它支持绑定的三种数据类型总结下用法（注：Switch绑定数据出错时默认显示关闭状态）：

1. 如果绑定的值是 Boolean 类型就不要加 active-value 属性和 inactive-value 属性，否则就

<div id="app">
    <el-switch
            v-model="value1"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="true"
            inactive-value="false">
    </el-switch>
    <el-switch
            v-model="value2"
            active-color="#13ce66"
            inactive-color="#ff4949"
            active-value="true"
            inactive-value="false">
    </el-switch>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                value1: true,
                value2: false
            }
        },
    })
</script>

正确用法->

<div id="app">
    <el-switch
            v-model="value1"
            active-color="#13ce66"
            inactive-color="#ff4949">
    </el-switch>
    <el-switch
            v-model="value2"
            active-color="#13ce66"
            inactive-color="#ff4949">
    </el-switch>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                value1: true,
                value2: false
            }
        },
    })
</script>

2. 如果绑定的值是 String 类型就按模板使用（注：绑定的值是字符串，但这个字符串内容可以是数字、中文、字母、字符，也可以是true和false）

<div id="app">
    <el-switch v-model="value1"  active-color="#13ce66"  inactive-color="#ff4949"
            active-value="true" inactive-value="false">
    </el-switch>
    <el-switch v-model="value2"  active-color="#13ce66"  inactive-color="#ff4949"
               active-value="1" inactive-value="0">
    </el-switch>
    <el-switch v-model="value3"  active-color="#13ce66"  inactive-color="#ff4949"
               active-value="是" inactive-value="否">
    </el-switch>
    <el-switch v-model="value4"  active-color="#13ce66"  inactive-color="#ff4949"
               active-value="a" inactive-value="b">
    </el-switch>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                value1: 'true',
                value2: '1',
                value3: '是',
                value4: 'a'
            }
        },
    })
</script>

3.如果绑定的值是 Number 类型，active-value 属性和 inactive-value 属性前要加 :

<div id="app">
    <el-switch v-model="value1"  active-color="#13ce66"  inactive-color="#ff4949"
               :active-value="1" :inactive-value="0">
    </el-switch>
    <el-switch v-model="value2"  active-color="#13ce66"  inactive-color="#ff4949"
               :active-value="1" :inactive-value="0">
    </el-switch>
</div>
<script>
    new Vue({
        el: '#app',
        data() {
            return {
                value1: 1,
                value2: 0,
            }
        },
    })
</script>

有补充或纠正的欢迎留言哦~