2
0
0
你可以使用Vue中的class或style綁定
#
data() {
return {
activeAlignment: 'center'
}
}
<div :style="{text-align : activeAlignment} ></div>
接著將activeAlignment綁定到你的單選按鈕模型上
您可以建立類別並將它們綁定：
new Vue({
el: '#app',
vuetify: new Vuetify(),
data: () => ({
text: 'some text',
align: ''
})
})
.left .v-text-field__slot textarea, .left .v-text-field__slot input {
text-align: left;
}
.center .v-text-field__slot textarea, .center .v-text-field__slot input {
text-align: center;
}
.right .v-text-field__slot textarea, .right .v-text-field__slot input {
text-align: right;
}
<link rel="stylesheet">
<link rel="stylesheet">
<link rel="stylesheet">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, minimal-ui">
</head>
<body>
<div id="app">
<v-app>
<v-main>
<v-container>
<v-btn-toggle
v-model="align"
tile
color="deep-purple accent-3"
group
>
<v-btn value="left">左對(duì)齊</v-btn>
<v-btn value="center">居中對(duì)齊</v-btn>
<v-btn value="right">右對(duì)齊</v-btn>
</v-btn-toggle>
<v-textarea
:class="align"
v-model="text"
label="文本"
></v-textarea>
<v-text-field
v-model="text"
label="文本"
:class="align"
></v-text-field>
</v-container>
</v-main>
</v-app>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue@2.x/dist/vue.js"></script>
<script src="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.js"></script>
