如何向用户输入添加文本 - Vue

Question

我有一个输入，用户可以在其中输入价格。当用户按下数字键时，我想在他们键入的任何内容前面加上一个“£”符号。

像这样但在输入字段中可见，而不仅仅是绑定到数据属性：

// empty
£1 // first keydown
£12
£125

示例： https://jsfiddle.net/Daniel_Knights/6xn12tj9/6/

任何想法如何实现这一目标？尝试了一些东西，但我很难过。

Answer 1

这是因为您将输入类型设置为数字。所以你只能使用数字。

但如果你想强制用户只输入数字，你可以这样做：

<div id="app">
  <input type="text" :placeholder="placeholderPrice" v-model="price" @keypress="mustNumber"/>
  <div class="price">
    <p v-if="price !== ''">
    </p>
    {{ price }}
  </div>
</div>

new Vue({
  el: "#app",
  data: {
    price: "£",
  },
  methods: {
        inputPrice(e) {
        this.price = `£${e.target.value}`;
    },
    mustNumber($event) {
            let keyCode = $event.keyCode ? $event.keyCode : $keyCode;

            // only allow number and one dot
            if (
                (keyCode < 48 || keyCode > 57) &&
                (keyCode !== 46)
            ) {
                $event.preventDefault();
            }
        }
  }
})

Answer 2

您需要屏蔽输入。例如你可以使用https://vuejs-tips.github.io/v-money/库

<template>
  <div>
    <money v-model="price" v-bind="money"></money> {{price}}
  </div>
</template>

<script>
  import {Money} from 'v-money'

  export default {
    components: {Money},

    data () {
      return {
        price: 123.45,
        money: {
        decimal: ',',
        thousands: '.',
        prefix: '£ ',
        suffix: '',
        precision: 2,
        masked: false
      }
      }
    }
  }
</script>

Answer 3

嗨，Daniel，我认为您可能需要将 type="number" 更改为 text 以允许您使用非数值