当前位置: 首页 > news >正文

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

概述:

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

常见用法:

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

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

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

//默认绑定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="",再手动赋值即可

http://www.lryc.cn/news/224098.html

相关文章:

  • mysql之高阶语句
  • 视频编软件会声会影2024中文版功能介绍
  • IS-LM模型:从失衡到均衡的模拟
  • 【Linux】进程终止
  • 55.跳跃游戏
  • php实现钉钉机器人推送消息和图片内容(完整版)
  • A Survey on Neural Network Interpretability
  • 代码随想录 Day41 动态规划09 LeetCode T121 买卖股票的最佳时机 T122 买卖股票的最佳时机II
  • ubuntu18-recvfrom接收不到广播报文异常分析
  • 漏刻有时百度地图API实战开发(6)多个标注覆盖层级导致不能响应点击的问题
  • 使用Net2FTP轻松打造免费的Web文件管理器并公网远程访问
  • MySQL的表格去重,史上最简便的算法,一看就会
  • this是指向的哪个全局变量,改变this指向的方法有几种?
  • 电脑msvcp110.dll丢失怎么办,msvcp110.dll缺失的详细修复步骤
  • cookie 里面都包含什么属性?
  • LinuxMySql
  • 《微服务架构设计模式》之三:微服务架构中的进程通信
  • μC/OS-II---内核:任务调度
  • 小程序发成绩
  • tensorflow内存泄漏或模型只加载不运行
  • npm和yarn的一些命令
  • Linux开发工具之自动化构建工具-make/Makefile
  • UE5蓝图接口使用方法
  • vue动态修改css样式
  • 小解List的使用【C++】
  • 自动驾驶高效预训练--降低落地成本的新思路(AD-PT)
  • Spring笔记(四)(黑马)(web层解决方案-SpringMVC)
  • 企业如何实现高效运转?工单管理系统有什么特点和优势?
  • 工业摄像机参数计算
  • Android系统中设置TextView的行间距