<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" type="text/css" href="css/index.css"/>
<script src="js/vue.js"></script>
<script src="js/index.js"></script>
</head>
<body>
<div class="app">
<!-- 基本用法：绑定v-model到一个Boolean类型的变量。
可以使用active-color属性与inactive-color属性来设置开关的背景色。 -->
<el-switch
v-model="value3"
active-color="#13ce66"
inactive-color="#ff4949">
</el-switch>
<br />
<!-- 文字描述:使用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>
<br />
<!-- 扩展的 value 类型:设置active-value和inactive-value属性，接受Boolean, String或Number类型的值 -->
<el-tooltip :content="'Switch value: ' + value" placement="top">
<el-switch
v-model="value"
active-color="#13ce66"
inactive-color="#ff4949"
active-value="100"
inactive-value="0">
</el-switch>
</el-tooltip>
<br />
<!-- 禁用状态:设置disabled属性，接受一个Boolean，设置true即可禁用。 -->
<el-switch
v-model="value1"
disabled>
</el-switch>
<el-switch
v-model="value4"
disabled>
</el-switch>
</div>
<script>
new Vue({
el:'.app',
data() {
return {
value3: true,
value1: true,
value2: true,
value4: false,
value:100
}
}
})
</script>
</body>
</html>
Element-switch
猜你喜欢
转载自blog.csdn.net/Lemontree_fu/article/details/94471297
今日推荐
周排行