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

Question

我有一个输入，用户可以在其中输入价格。当用户按数字键时，我想在他们键入的任何内容前面加上“£”符号。像这样，但在输入字段中可见，而不仅仅是绑定到数据属性：// empty£1 // first keydown£12£125示例：https://jsfiddle.net/Daniel_Knights/6xn12tj9/6/任何想法如何实现这一目标？尝试了一些事情，但我感到困惑。

Answer 1

嗨，丹尼尔，我认为您可能需要将type=“number”更改为文本，以允许您使用非数字值

Answer 2

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

但是，如果要强制用户仅输入数字，则可以执行以下操作：

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

您需要屏蔽的输入。例如，您可以使用 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>