在特定条件下，移动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;
}

php8，我来也

30分钟学会网站布局

尚观Oracle入门到精通视频教程

你的第一行 UNI-APP 代码

Flutter 从头到应用启动

兄弟连Linux新版视频教程

AXURE 9视频教程（适合产品经理交互产品设计UI）

零基础PS视频教程

16天带你入门UI视频教程

PS技巧和切片技巧视频教程

阿里云环境搭建以及项目上线视频教程

计算机网络概述——程序员必须掌握的基础知识

程序员必备教程——HTTP协议讲解

Websocket视频教程