elementUI的el-switch的使用

最新推荐文章于 2024-09-13 15:23:50 发布

好记性真不如烂笔头

最新推荐文章于 2024-09-13 15:23:50 发布

阅读量1.6w

点赞数 12

分类专栏： elementui vue 文章标签： elementui vue.js javascript

原文链接：https://blog.csdn.net/qq_36330228/article/details/114119837

版权

vue 同时被 2 个专栏收录

16 篇文章 1 订阅

订阅专栏

elementui

6 篇文章 1 订阅

订阅专栏

工作记录

背景：el-switch绑定值的问题
在这里插入图片描述

第一种：

v-model绑定布尔值

<template>
    <el-switch
        v-model="value"
        active-color="#13ce66"
        inactive-color="#ff4949">
    </el-switch>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
    //页面加载初始化为开启状态
      value:true
    }
  }
}
</script>

<style scoped>

</style>

第二种：

v-model绑定布尔值，当绑定的值为 active-value或inactive-value的相等值时，开启或关闭

①情况一：
当active-value="1"或active-value=1（或inactive-value=“0"或inactive-value=0）时，表示v-model绑定的值须为’1’或"0”——(值为string类型)，否则虽然也能切换(el-switch的属性)，并没有和v-model绑定的值有关系；

<template>
    <el-switch
        v-model="value"
        active-value="1"
        inactive-value="0"
        active-color="#13ce66"
        inactive-color="#ff4949">
    </el-switch>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      //value需为字符串
      value: "1"
    }
  }
}
</script>

<style scoped>

</style>

②情况二：
当 :active-value="1"或 :active-value=1 （或:inactive-value="0"或 :inactive-value=0）时，表示v-model绑定的值须为1或0——(值为Number类型)，否则虽然也能切换(el-switch的属性)，并没有和v-model绑定的值有关系；

<template>
    <el-switch
        v-model="value"
        :active-value="1"
        :inactive-value="0"
        active-color="#13ce66"
        inactive-color="#ff4949">
    </el-switch>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      //value需为Number类型
      value: 1
    }
  }
}
</script>

<style scoped>

</style>

change事件

在这里插入图片描述
当数据改变时，调用change绑定的方法。该回调函数有一个参数，为当前状态的value值

<template>
  <div>
    <el-switch
        v-model="value"
        active-value="1"
        inactive-value="0"
        @change='changeStatus'
        active-color="#13ce66"
        inactive-color="#ff4949">

    </el-switch>
  </div>
</template>

<script>
export default {
  name: "home",
  data() {
    return {
      value:"1"
    }
  },
  methods: {
    //该参数为当前的value值
    changeStatus: function (callback) {
      console.log(callback);
    }
  }
}
</script>

<style scoped>

</style>

更多参数看官方文档