Vue使用自定义事件的表单输入组件，对输入的值保留x位，删除两侧空格键，输入数值格式化

小练习，小练习哈，直接上代码，上课上的太无聊了，来玩一玩vue来了~

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="app">
        <!-- <input type="text" v-model="something"> -->
        <currency-input v-model="price"></currency-input>
    </div>


    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/vue.js"></script>
    <script>
      Vue.component('currency-input', {
      
      
        template: '\
            <span>\
            $\
            <input\
                ref="input"\
                v-bind:value="value"\
                v-on:input="updateValue($event.target.value)"\
            >\
            </span>\
        ',
        props: ['value'],
        methods: {
      
      
            // 不是直接更新值，而是使用此方法来对输入值进行格式化和位数限制
            updateValue: function (value) {
      
      
            var formattedValue = value
                // 删除两侧的空格符
                .trim()
                // 保留 2 小数位
                .slice(0, value.indexOf('.') + 3)
            // 如果值不统一，手动覆盖以保持一致
            if (formattedValue !== value) {
      
      
                this.$refs.input.value = formattedValue
            }
            // 通过 input 事件发出数值
            this.$emit('input', Number(formattedValue))
            }
        }
}) 
        var app = new Vue({
      
      
            el: "#app",
            data: {
      
      
                price: 0
            }
        })
    </script>
</body>
</html>

在这里插入图片描述
对输入的数据进行位数的判定，如果说你输入的不是数字的话，就会：

出现错误的字样，ok，下课了快，今天到这。

Vue使用自定义事件的表单输入组件，对输入的值保留x位，删除两侧空格键，输入数值格式化

猜你喜欢