Verschieben Sie unter bestimmten Bedingungen die Position des V-Textfeld-Textes

Question

Ich verwende Vue.js und Vuetify. Habe eine interessante Szene erlebt. Ich habe also drei Optionen (Optionsfelder) links in der Mitte rechts und ich habe ein V-Textfeld mit einem bestimmten Textwert und einem schreibgeschützten Attribut. Wenn sich nun die Option ändert/auswählt, möchte ich die Position dieses Textes im V-Text-Feld ändern. Beispielsweise sollte bei Option 1 (links) der Text innerhalb des V-Textfelds nach links verschoben werden. Wenn Option 2 (Mitte) verwendet wird, sollte der Text in die Mitte verschoben werden. Und so weiter und so fort. Irgendwelche Vorschläge dazu. Wenn es einen besseren Weg gibt, führen Sie mich bitte.

P粉306523969 · Answer

你可以使用Vue中的class或style绑定

data() {
  return {
    activeAlignment: 'center'
  }
}

P粉466290133 · Answer

您可以创建类并将它们绑定：

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;
}