Question

我想使用JavaScript vue.js将价格IDR 50,000.00的格式更改为：IDR 50.000。

我从以下链接获得了此脚本：https://jsfiddle.net/mani04/bgzhw68m/

但是我不明白它是如何工作的。我不知道这是什么

replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")

所以我无法更改格式。如果你知道这一点，请告诉我：（

Vue.js

<template lang="html">
  <div>
     <input type="text" class="form-control" v-model="displayValue" @blur="isInputActive = false" @focus="isInputActive = true"/>
 </div>
</template>

<script>
export default {
  props: ["value"],
  data: function() {
       return {
           isInputActive: false
       }
   },
   computed: {
       displayValue: {
           get: function() {
               if (this.isInputActive) {
                   // Cursor is inside the input field. unformat display value for user
                   return this.value.toString()
               } else {
                   // User is not modifying now. Format display value for user interface
                   return "IDR " + this.value.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")
               }
           },
           set: function(modifiedValue) {
               // Recalculate value after ignoring "$" and "," in user input
               let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, ""))
               // Ensure that it is not NaN
               if (isNaN(newValue)) {
                   newValue = 0
               }
               // Note: we cannot set this.value as it is a "prop". It needs to be passed to parent component
               // $emit the event so that parent component gets it
               this.$emit('input', newValue)
           }
       }
   }
}
</script>

<style lang="css">
</style>

Answer 1

如果您使用的是jquery，我建议您使用jquery数字格式。这使您可以在键入时自动格式化输入元素中的数字

<html>
<head>
    <script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
    <script type="text/javascript" src="/static/js/sijax/sijax.js"></script>
    <script type="text/javascript">
        {{ g.sijax.get_js()|safe }}
    </script>
</head>
    <body>
        <form method="POST">
        <input type="text" name="name" oninput="Sijax.request('say_hello');">
        </form>
    </body>
</html>

Vue.component('idr', {
    template: '<input type="text" class="form-control" v-model="txTotal"/>',
    computed: {
        txTotal: {
            get() {
                return this.value;
            },
            set(val) {
                var rp = val.replace(/[^0-9]/g, '');
                this.$emit('input', rp)
            }
        }
    },
    mounted() {
        $(this.$el).number(true, 0, ',', '.')
    }
})

new Vue({
    el: '#app',
    data: {
        total: '',
    }
})

无需JQUERY更新

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/df-number-format/2.1.6/jquery.number.min.js"></script>

<div id="app">
  <idr @input="total = $event"></idr>
  {{ total }}
</div>

Vue.component('idr', {
    template: '<input type="text" v-model="currentValue" @input="handleInput" />',
    props: {
      value: {
        type: [String, Number],
        default: ""
      },
    },
    data: () => ({
      currentValue: ''
    }),
    watch: {
      value: {
        handler(after) {
          this.currentValue = this.format(after)
        },
        immediate: true
      }
    },
    methods: {
      format: value => (value + '').replace(/\D/g, "").replace(/\B(?=(\d{3})+(?!\d))/g, "."),
      
      handleInput() {
        this.currentValue = this.format(this.currentValue)
        this.$emit('input', (this.currentValue + '').replace(/[^0-9]/g, ""))
      }
    }
})

new Vue({
    el: '#app',
    data: {
        total: 5000,
    }
})

Answer 2

我已经更新了JSFiddle：https://jsfiddle.net/p0jdbfL2/

我更改了这一行

return "$ " + this.value.toFixed(2).replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1,")

对此

return "IDR " + this.value.toString().replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1\.")

摘要：

Vue.component('my-currency-input', {
    props: ["value"],
    template: `
        <div>
            <input type="text" v-model="displayValue" @blur="isInputActive = false" @focus="isInputActive = true"/>
        </div>`,
    data: function() {
        return {
            isInputActive: false
        }
    },
    computed: {
        displayValue: {
            get: function() {
                if (this.isInputActive) {
                    // Cursor is inside the input field. unformat display value for user
                    return this.value.toString()
                } else {
                    // User is not modifying now. Format display value for user interface
                    return "IDR " + this.value.toString().replace(/(\d)(?=(\d{3})+(?:\.\d+)?$)/g, "$1\.")
                }
            },
            set: function(modifiedValue) {
                // Recalculate value after ignoring "$" and "," in user input
                let newValue = parseFloat(modifiedValue.replace(/[^\d\.]/g, ""))
                // Ensure that it is not NaN
                if (isNaN(newValue)) {
                    newValue = 0
                }
                // Note: we cannot set this.value as it is a "prop". It needs to be passed to parent component
                // $emit the event so that parent component gets it
                this.$emit('input', newValue)
            }
        }
    }
});

new Vue({
    el: '#app',
    data: function() {
        return {
            price: 50000
        }
    }
});

body {
    margin: 20px;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}
input {
    border: 1px solid #888;
    font-size: 1.2rem;
    padding: 0.5rem;
}

<script src="https://unpkg.com/vue@2.1.5/dist/vue.js"></script>
<div id="app">
  Price:
  <my-currency-input v-model="price"></my-currency-input>
  <p>
    Price (in parent component): {{price}}
  </p>
</div>

使用vue.js将格式价格更改为印尼盾

2 个答案: