输入框输入数字，且不能有小数点存在

不念不忘少年蓝@ 2022-12-22 11:10 160阅读 0赞

# 基于Vue项目进行设置 #

<template>
    	    <comp v-if="update"></comp>
    	    <button @click="reload()">刷新comp组件</button>
    	</template>
    	<script>
    	import comp from '@/views/comp.vue'
    	export default { 
    	    name: 'parentComp',
    	    data() { 
    	        return { 
    	            update: true
    	        }
    	    },
    	    methods: { 
    	        reload() { 
    	            // 移除组件
    	            this.update = false
    	            // 在组件移除后，重新渲染组件
    	            // this.$nextTick可实现在DOM 状态更新后，执行传入的方法。
    	            this.$nextTick(() => { 
    	                this.update = true
    	            })
    	        }
    	    }
    	}
    	</script>

# 基于Vue项目的组件库 Vux 进行设置 #

//Vux组件库
     <x-input
         v-if="update1"
          v-model="numWithType1"
          style="
            border: 1px solid #cccccc;
            margin: 5px 0 0 67%;
            width: 60px;
            height:7px;
          "
    ></x-input>
    
    
    
    
    return { 
    	update1: true,
    }
    
    
    
    watch: { 
        numWithType1(newval, oldval) { 
        //正则表达式
          var patrn = /^[0-9]*$/;
          //监听数据的变化
          if (!patrn.test(newval)) { 
            this.update1 = false;
            this.numWithType1 = oldval;
            this.$nextTick(() => { 
              this.update1 = true;
            });
            return;
          }
        },
    }