源代码
<template>
<div>
<h2>Basic SwitchButton</h2>
<div class="fitem">
<Label for="s1">Receive mail:</Label>
<SwitchButton inputId="s1" v-model="received"></SwitchButton>
</div>
<div class="fitem">
<Label for="s2">Shared network:</Label>
<SwitchButton inputId="s2" v-model="shared"></SwitchButton>
</div>
<div class="fitem">
<Label for="s3">Subscribed:</Label>
<SwitchButton inputId="s3" v-model="subscribed"></SwitchButton>
</div>
<p>Received: {{received}}, Shared: {{shared}}, Subscribed: {{subscribed}}</p>
</div>
</template>
<script>
export default {
data() {
return {
received: true,
shared: true,
subscribed: false
};
}
};
</script>
<style>
.fitem {
margin-bottom: 20px;
}
.fitem label {
width: 150px;
}
</style>