Switch 开关

192 阅读 0 评论 127 点赞

我是靠谱客的博主包容小伙，这篇文章主要介绍Switch 开关，现在分享给大家，希望可以做个参考。

开关

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

示例:

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

<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
export default {
data() {
return {
value: true
}
}
};
</script>

加上文字描述

示例:

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

<el-switch
v-model="value1"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<el-switch
style="display: block"
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<script>
export default {
data() {
return {
value1: true,
value2: true
}
}
};
</script>