搜尋

首頁  >  問答  >  主體

在特定條件下，移動v-text-field文字的位置

<p>我正在使用Vue.js和Vuetify。遇到了一個有趣的場景。 所以我有三個選項（單選按鈕）</p> <ul> <li>左</li> <li>中</li> <li>右</li> </ul> <p>我有一個帶有特定文字值和唯讀屬性的v-text-field。 現在，當選項改變/選擇時，我想要改變該文字在v-text-field內的位置。 </p> <p>例如，當選項1（左）時，文字應該會移動到v-text-field內的左側。當選項2（中）時，文字應該移動到中間。依此類推。 </p> <p>對此有什麼建議。如果有更好的方法，請指導一下。 </p>
P粉041856955P粉041856955455 天前550

全部回覆(2)我來回復

  • P粉306523969

    P粉3065239692023-08-29 14:57:47

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

    # 
    data() {
  return {
    activeAlignment: 'center'
  }
}
    <div :style="{text-align : activeAlignment} ></div>

    接著將activeAlignment綁定到你的單選按鈕模型上

    回覆
    0
  • P粉466290133

    P粉4662901332023-08-29 12:21:57

    您可以建立類別並將它們綁定：

    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 href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,500,700,900" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/@mdi/font@6.x/css/materialdesignicons.min.css" rel="stylesheet">
<link href="https://cdn.jsdelivr.net/npm/vuetify@2.x/dist/vuetify.min.css" 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">左对齐</v-btn>
          <v-btn value="center">居中对齐</v-btn>
          <v-btn value="right">右对齐</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>

    回覆
    0
  • 取消回覆