代码之家 › 专栏 › 技术社区 › Chris

使用v-model时,vue将货币添加到输入文本

vue.js

1

Chris · 技术社区 · 7 年前

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

input(v-model="amount")

2 回复 | 直到 7 年前

1

ittus 7 年前

你可以用一些 masked input library ,例如 v-money 掩盖你的意见

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

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

2

0

Sovalina 7 年前

你可以用一些css来欺骗:

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

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

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