在特定条件下，移动v-text-field文本的位置

Question

我正在使用Vue.js和Vuetify。遇到了一个有趣的场景。所以我有三个选项（单选按钮）左中右我有一个带有特定文本值和只读属性的v-text-field。现在，当选项改变/选择时，我想要改变该文本在v-text-field内的位置。例如，当选项1（左）时，文本应该移动到v-text-field内的左侧。当选项2（中）时，文本应该移动到中间。依此类推。对此有什么建议。如果有更好的方法，请指导一下。

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

在特定条件下，移动v-text-field文本的位置

全部回复(2)我来回复