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>

最后

以上就是包容小伙为你收集整理的Switch 开关的全部内容，希望文章能够帮你解决Switch 开关所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。