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

Question

我想使用 JS 和 VueIDR 50,000.00将这个价格的格式更改为这样。IDR 50.000

我从这个链接得到了这个脚本，但我不明白它是如何工作的。我不知道这是什么

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>

标签： javascripthtmlregexstringvue.js

Answer 1

我改变了这条线

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>