鞍山手机网站设计,WordPress怎么输入代码,网站建设和运营的教程,外包公司名单概述#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,再手动赋值即可
