Sous certaines conditions, déplacez la position du texte du champ de texte v

Question

J'utilise Vue.js et Vuetify. J'ai rencontré une scène intéressante. J'ai donc trois options (boutons radio) gauche, milieu droit et j'ai un champ de texte v avec une valeur de texte spécifique et un attribut en lecture seule. Maintenant, lorsque l'option change/sélectionne, je souhaite modifier la position de ce texte dans le champ de texte v. Par exemple, lorsque l'option 1 (gauche), le texte doit être déplacé vers la gauche dans le champ de texte en v. Lorsque l’option 2 (milieu) est utilisée, le texte doit se déplacer vers le milieu. Etc., etc. Des suggestions à ce sujet. S'il existe un meilleur moyen, guidez-moi s'il vous plaît.

P粉306523969 · Answer

Vous pouvez utiliser la liaison classe ou style dans Vue

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

P粉466290133 · Answer

Vous pouvez créer des classes et les lier :

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