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

Question

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

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

// empty

£1 // first keydown

£12

£125

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

任何想法如何实现这一目标？尝试了一些事情，但我感到困惑。

Answer 1

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

Answer 2

这是因为您将输入类型设置为数字。所以你只能使用数字。但是，如果要强制用户仅输入数字，则可以执行以下操作：<div id="app">&nbsp; <input type="text" :placeholder="placeholderPrice" v-model="price" @keypress="mustNumber"/>&nbsp; <div class="price">&nbsp; &nbsp; <p v-if="price !== ''">&nbsp; &nbsp; </p>&nbsp; &nbsp; {{ price }}&nbsp; </div></div>new Vue({&nbsp; el: "#app",&nbsp; data: {&nbsp; &nbsp; price: "£",&nbsp; },&nbsp; methods: {&nbsp; &nbsp; &nbsp; &nbsp; inputPrice(e) {&nbsp; &nbsp; &nbsp; &nbsp; this.price = `£${e.target.value}`;&nbsp; &nbsp; },&nbsp; &nbsp; mustNumber($event) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; let keyCode = $event.keyCode ? $event.keyCode : $keyCode;&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; // only allow number and one dot&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (keyCode < 48 || keyCode > 57) &&&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; (keyCode !== 46)&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; ) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $event.preventDefault();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; }})

Answer 3

您需要屏蔽的输入。例如，您可以使用 https://vuejs-tips.github.io/v-money/ 库<template>&nbsp; <div>&nbsp; &nbsp; <money v-model="price" v-bind="money"></money> {{price}}&nbsp; </div></template><script>&nbsp; import {Money} from 'v-money'&nbsp; export default {&nbsp; &nbsp; components: {Money},&nbsp; &nbsp; data () {&nbsp; &nbsp; &nbsp; return {&nbsp; &nbsp; &nbsp; &nbsp; price: 123.45,&nbsp; &nbsp; &nbsp; &nbsp; money: {&nbsp; &nbsp; &nbsp; &nbsp; decimal: ',',&nbsp; &nbsp; &nbsp; &nbsp; thousands: '.',&nbsp; &nbsp; &nbsp; &nbsp; prefix: '£ ',&nbsp; &nbsp; &nbsp; &nbsp; suffix: '',&nbsp; &nbsp; &nbsp; &nbsp; precision: 2,&nbsp; &nbsp; &nbsp; &nbsp; masked: false&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; }&nbsp; }</script>