<!--绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。-->
<el-switch
v-model="value2"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<script>
new Vue({
el: '#app',
data() {
return {
value1: true,
value2: true
}
}
})
</script>
<!--使用active-text属性与inactive-text属性来设置开关的文字描述。-->
<el-switch
v-model="value3"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<!--display: block:此元素将显示为块级元素,此元素前后会带有换行符。-->
<el-switch
style="display: block"
v-model="value4"
active-color="#13ce66"
inactive-color="#ff4949"
active-text="按月付费"
inactive-text="按年付费">
</el-switch>
<script>
new Vue({
el: '#app',
data() {
return {
value3: true,
value4: true
}
}
})
</script>
Attributes
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
disabled | 是否禁用 | boolean | — | false |
width | switch 的宽度(像素) | number | — | 40 |
active-text | switch 打开时的文字描述 | string | — | — |
inactive-text | switch 关闭时的文字描述 | string | — | — |
active-value | switch 打开时的值 | boolean / string / number | — | true |
inactive-value | switch 关闭时的值 | boolean / string / number | — | false |
active-color | switch 打开时的背景色 | string | — | #409EFF |
inactive-color | switch 关闭时的背景色 | string | — | #C0CCDA |