Question

如何将货币符号附加到输入值，使其看起来像是输入的一部分？即当用户输入10并且仍然有10作为数据的数据值时，如何让它显示“10 $”？

input(v-model="amount")

Answer 1

您可以使用一些masked input library，例如v-money来屏蔽您的输入

＆＃13;

new Vue({
  el: '#app',
  data () {
    return {
      price: 123.45,
      money: {
        decimal: ',',
        thousands: '.',
        prefix: '(prefix any thing) ',
        suffix: ' $',
        precision: 2,
        masked: false
      }
    }
  }
})

＆＃13;

<script src="https://cdn.jsdelivr.net/npm/vue@2.5.16/dist/vue.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/spectre.css/0.2.14/spectre.min.css" rel="stylesheet"/>
<script src="https://rawgit.com/vuejs-tips/v-money/master/dist/v-money.js"></script>
<div id="app" class="empty">
  <money v-model="price"
         v-bind="money"
         class="form-input input-lg"></money>
  {{price}}
</div>

＆＃13;

Answer 2

你可以用一些css欺骗：

＆＃13;

new Vue({
  el: "#app",
  data: {
    amount: null
  }
})

＆＃13;

#app {
  margin: 10px;
}
input {
  border: none;
  outline: none;
  text-align: right;
  padding-right: 3px;
  font-size: inherit;
  font-family: inherit;
}
.label {
  border: 1px solid #B1B1B1;
  border-radius: 3px;
  padding: 5px 8px;
}

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.16/vue.min.js"></script>
<div id="app">
  <p>Amount is: {{ amount }}</p>
  <label class="label">
    <input type="text" v-model="amount">$
  </label>
</div>

＆＃13;

vue使用v-model

2 个答案: