网站建设职业描述,郑州网站免费制作,广播电视网站建设,检测设备技术支持东莞网站建设概述#xff1a; el-switch 表示两种相互对立的状态间的切换#xff0c;多用于触发「开/关」。 常见用法#xff1a; 1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 2、使用active-text属性与inactive-tex…概述 el-switch 表示两种相互对立的状态间的切换多用于触发「开/关」。 常见用法 1、绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。 2、使用active-text属性与inactive-text属性来设置开关的文字描述。 3、设置active-value和inactive-value属性接受Boolean, String或Number类型的值。 //默认绑定Boolean类型的变量 el-switch v-modelvalue/el-switch//设置颜色 el-switch v-modelvalue active-color#13ce66 inactive-color#ff4949/el-switch//设置显示文字 el-switch v-modelboolValue active-text启用 inactive-text关闭/el-switch//默认绑定String类型的变量 el-switch v-modelvalue2 active-valuemale inactive-valuefemael/el-switch//绑定Number类型 el-switch v-modelvalue3 :active-value1 :inactive-value0/el-switch//禁用 el-switch v-modelvalue disabled/el-switch//绑定事件 el-switch v-modelvalue changeswitchChange/el-switchscriptexport default {data() {return {value: true,value2: male,value3: 0,}},methods: {switchChange() {console.log(this.value);}}}; /script 拓展问题 element中el-switch开关点击弹出确认框时状态先改变点击确认/取消失效怎么解决? 原因v-model的数据双向绑定原理点击开关时状态就已实时改变 解决方案 只需将v-model改成:value,再手动赋值即可