Form-switch开关

<!--绑定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