element中el-switch用法汇总(拓展:el-switch开关点击弹出确认框时,状态先改变,点击确认/取消失效,怎么解决?)

概述:

el-switch 表示两种相互对立的状态间的切换,多用于触发「开/关」。

常见用法:

1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。

2、使用active-text属性与inactive-text属性来设置开关的文字描述。

3、设置active-valueinactive-value属性,接受Boolean, StringNumber类型的值。

复制代码
//默认绑定Boolean类型的变量
<el-switch v-model="value"></el-switch>

//设置颜色
<el-switch v-model="value" active-color="#13ce66" inactive-color="#ff4949"></el-switch>

//设置显示文字
<el-switch v-model="boolValue" active-text="启用" inactive-text="关闭"></el-switch>

//默认绑定String类型的变量
<el-switch v-model="value2" active-value="male" inactive-value="femael"></el-switch>

//绑定Number类型
<el-switch v-model="value3" :active-value="1" :inactive-value="0"></el-switch>

//禁用
<el-switch v-model="value" disabled></el-switch>

//绑定事件
<el-switch v-model="value" @change="switchChange"></el-switch>

<script>
  export default {
    data() {
      return {
        value: true,
        value2: 'male',
        value3: 0,
      }
    },
     methods: {
        switchChange() {
          console.log(this.value);
      }
    }
  };
</script>

拓展问题:

element中el-switch开关点击弹出确认框时,状态先改变,点击确认/取消失效,怎么解决?

**原因:**v-model的数据双向绑定原理,点击开关时状态就已实时改变

解决方案:

只需将v-model改成:value="",再手动赋值即可

相关推荐
索迪迈科技3 分钟前
网络请求库——Axios库深度解析
前端·网络·vue.js·北京百思可瑞教育·百思可瑞教育
一朵梨花压海棠go1 小时前
html+js实现表格本地筛选
开发语言·javascript·html·ecmascript
一只小风华~2 小时前
Vue: Class 与 Style 绑定
前端·javascript·vue.js·typescript·前端框架
十碗饭吃不饱2 小时前
net::ERR_EMPTY_RESPONSE
java·javascript·chrome·html5
Zz_waiting.3 小时前
Javaweb - 14.6 - Vue3 数据交互 Axios
开发语言·前端·javascript·vue·axios
切糕师学AI3 小时前
前后端分离架构中,Node.js的底层实现原理与线程池饥饿问题解析
前端·vue.js·node.js
每天吃饭的羊4 小时前
state和ref
前端·javascript·react.js
GEO_YScsn4 小时前
Vite:Next-Gen Frontend Tooling 的高效之道——从原理到实践的性能革命
前端·javascript·css·tensorflow
GISer_Jing4 小时前
滴滴二面(准备二)
前端·javascript·vue·reactjs
摇滚侠4 小时前
Vue3入门到实战,最新版vue3+TypeScript前端开发教程,笔记03
javascript·笔记·typescript