《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'"

   效果图如下： 

                                               

  完整代码如下：

<template>
  <el-tooltip :content="'Switch value: ' + dataForm.topSideState" placement="top">
  <el-switch
    v-model="dataForm.topSideState"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="'100'"
    :inactive-value="'0'"
    @change="change(dataForm.topSideState)"
    >
  </el-switch>
</el-tooltip>
</template>

<script>
export default {
  data () {
    return {
      value: 1,
      dataForm: {
        id: 1,
        sort: '',
        topSideState: '100',
      },
    }
  },
  methods: {
    change () {
      console.log('开关-----', this.dataForm.topSideState)
    },
  },
}
</script>

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

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

   效果图如下：     

                                                                                     

完整代码如下：

<template>
  <el-tooltip :content="'Switch value: ' + dataForm.topSideState" placement="top">
  <el-switch
    v-model="dataForm.topSideState"
    active-color="#13ce66"
    inactive-color="#ff4949"
    :active-value="100"
    :inactive-value="0"
    @change="change(dataForm.topSideState)"
    >
  </el-switch>
</el-tooltip>
</template>

<script>
export default {
  data () {
    return {
      value: 1,
      dataForm: {
        id: 1,
        sort: '',
        topSideState: 100,
      },
    }
  },
  methods: {
    change () {
      console.log('开关-----', this.dataForm.topSideState)
    },
  },
}
</script>

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

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

               

效果图如下：

                                       

  完整代码如下：

<template>
  <el-tooltip :content="'Switch value: ' + dataForm.topSideState" placement="top">
  <el-switch
    v-model="dataForm.topSideState"
    active-color="#13ce66"
    inactive-color="#ff4949"
    @change="change(dataForm.topSideState)"
    >
  </el-switch>
</el-tooltip>
</template>

<script>
export default {
  data () {
    return {
      value: 1,
      dataForm: {
        id: 1,
        sort: '',
        topSideState: true,
      },
    }
  },
  methods: {
    change () {
      console.log('开关-----', this.dataForm.topSideState)
    },
  },
}
</script>

 结语：

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