《Element-UI Switch之动态绑定》

前言：

        根据Element-UI的官网对Switch开关进行使用，可是发现却不起作用，接下来看小编是如何来斩妖除魔的吧

正文：

        首先，Switch的开关控制，官网提供有三种数据类型：boolean / string / number

        所以出现Switch开关没有正确的效果，第一要考虑双向绑定数据类型的问题

        其次，官网提供的实例，如下图所示：

                                              

       active-value="100"，inactive-value="0",开关绑定的是具体数值，并且此时的100和10是string的数据类型，如果想要进行动态绑定，需要做出以下变化：

       1.分别在active-value和inactive-value前加： ":"

       2.做完第一步后，此时的100和10的数据类型变成了number，所以需要将上述代码修改为：

:active-value="'100'"
:inactive-value="'0'"

   效果图如下： 

                                               

  完整代码如下：

  如果项目要求的动态绑定的数值数据类型为number，那就只需要做出一步就可以：

:active-value="100"
:inactive-value="0"

   效果图如下：     

                                                                                     

完整代码如下：

 如果项目要求绑定的数值数据类型为boolean，需要做出一下改变：

 1.去掉active-value和inactive-value，组件的默认值直接就是boolean类型，并且：

               

效果图如下：

                                       

  完整代码如下：

 结语：

         在vue中，动态绑定属性需要使用v-bind指令，在实际使用过程中，使用缩写语法，在属性前加":"