vue.js 输入框金额限制

1、页面（有点丑）：

2、代码：

<html>
<head>
<title>输入框</title>
<style>div#table_id{margin:10px;}.input{padding:10px}
</style>
</head>
<body><div id="table_id">输入框的内容 <= 99 <br/><input class="input" type="text" v-model="info.use_fee" @input="changeNumFloat($event)"></div>
</body>
<script src="https://cn.vuejs.org/js/vue.js"></script>
<script>//let info = {:json_encode($info)};let info = {'use_fee':99};//let type_list = {:json_encode($type_list)};let use_max_price = info.use_fee;new Vue({el: '#table_id',data() {return {info: info,//type_list: type_list};},methods: {changeNumFloat( e ) {let newNum = e.target.value;let oldNum = use_max_price;if (isNaN(newNum)) {this.info.use_fee = ''}else{if (parseFloat(newNum) < 0 || parseFloat(newNum) > parseFloat(oldNum)) {this.info.use_fee = oldNum;} else {this.info.use_fee = newNum;}}}}})
</script>
</html>

vue.js 输入框金额限制相关推荐

Vue.JS项目输入框中使用v-model导致number类型值自动转换成string问题的解决方案
老文章了,目前用el-input v-model.number就能解决很简单的操作,不知道当初在做什么,下文请直接忽略- Vue.JS项目中v-model导致输入框中number类型值自动转换成st ...
Vue.js学习笔记—input-number:实战：开发一个数字输入框组件
参考<Vue,js>实战(梁灏编著) input-number:实战:开发一个数字输入框组件 git代码 index.html <!DOCTYPE html> <html ...
JS中金额转换以及格式化Vue过滤器
JS中金额转换以及格式化 - 为数字加上单位:万或亿 import Vue from 'vue' /** * 为数字加上单位:万或亿 * * 例如: * 1000.01 => 1000.01 * ...
html input dropdown,Vue.js 带下拉选项的输入框(Textbox with Dropdown)组件
带下拉选项的输入框 (Textbox with Dropdown) 是既允许用户从下拉列表中选择输入又允许用户自由键入输入值.这算是比较常见的一种 UI 元素,可以为用户提供候选项节省操作时间,也可以 ...
vue.js表情文本输入框组件
文章目录参考链接效果图代码 emoji.json EmojiText.vue 使用参考链接 JS操作文本域获取光标/指定位置插入 vue.js支持表情输入 ttkwsd博客效果图代码不能 ...
vue.js+boostrap最佳实践
一.为什么要写这篇文章最近忙里偷闲学了一下vue.js,同时也复习了一下boostrap,发现这两种东西如果同时运用到一起,可以发挥很强大的作用,boostrap优雅的样式和丰富的组件使得页面开发变 ...
springboot+vue.js+mysql+基于VUE框架的商城综合项目自动化系统的实现毕业设计-附源码051018
商城综合项目自动化系统摘要目前电商系统商城项目管理极其频繁,迫切地需要自动化测试来代替人工繁琐而又重复的劳动.自动化测试相关的研究已经很多,但多数只是针对某一方面,比如单一接口或者单一页面或者性 ...
（附源码）springboot+vue.js+mysql+基于VUE框架的商城综合项目自动化系统的实现毕业设计051018
商城综合项目自动化系统摘要目前电商系统商城项目管理极其频繁,迫切地需要自动化测试来代替人工繁琐而又重复的劳动.自动化测试相关的研究已经很多,但多数只是针对某一方面,比如单一接口或者单一页面或者性 ...
js去掉前后空格的函数_2020年最火爆的Vue.js面试题
2020年Vue面试题 Interview ●●●● 作者:@烦恼会解决烦恼 vue核心知识--理论篇 1.对于Vue是一套渐进式框架的理解渐进式代表的含义是:主张最少. Vue可能有些方面是不如R ...
Vue.js双向绑定的实现原理
Vue.js 最核心的功能有两个,一是响应式的数据绑定系统,二是组件系统.本文仅探究双向绑定是怎样实现的.先讲涉及的知识点,再用简化得不能再简化的代码实现一个简单的 hello world 示例. 一 ...

vue.js 输入框金额限制

vue.js 输入框金额限制相关推荐

最新文章

热门文章