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类型的变量


//设置颜色


//设置显示文字


//默认绑定String类型的变量


//绑定Number类型


//禁用


//绑定事件


拓展问题:

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

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

解决方案:

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

你可能感兴趣的:(VUE,Element,vue.js,javascript,elementui)