vue 动态绑定change事件
2023-09-11 14:15:07 时间
需求描述
要求输入框输入0-100之间的数据,需要保留2位小数。
输入框是通过v-for
渲染的,需要动态添加一个change事件。
问题分析
使用文本输入框,监听输入框的change事件,然后使用toFixed
方法保留小数位。
问题解决
- 普通输入框
<el-input v-model="form1.rate" @change="handleChange" />
- 动态输入框
<!-- 满足条件的才有 handleChange 事件 -->
<el-input v-model="form1.rate" @change="(v)=>item.key==='rate' && handleChange(v)" />
handleChange(val) {
if (val && !isNaN(val)) {
let v = Number(val)
this.form1.rate = v.toFixed(2)
}
}
备注
动态绑定其他事件方法一样
<td v-for="(k, i) in data" @click="() => i > 2 && fun()"></td>
相关文章
- import Vue from 'vue';
- vue.js--基础 事件结合双向数据绑定实现todolist,增加和删除功能
- 【Vue】render函数使用和详解
- Vue - route 路由中配置 404 页面
- [转]Vue 中 强制组件重新渲染的正确方法
- vue一个组件监听另一个组件
- vue.js-详解三大流行框架VUE_快速进阶前端大咖-Vue基础
- Vue的Key属性,v-for和v-if,v-if/v-show,v-pre不渲染,v-once只渲染一次
- Vue.prototype详解
- vue之loader处理静态资源
- 【Vue】vue基础语法——自定义指令、过滤、组件和动画(内附详细案例代码)——day04
- vue学习笔记九:Jquery VS Vue之遍历方法对照
- Vue 安装“npm install -g @vue/cli”发生npm WARN deprecated request@2.88.2: request has been deprecated,的错误解决方法
- 浅析如何升级vue-cli以及使用npm卸载包时遇到问题:npm ERR! code EEXIST(npm ERR! File exists: D:Programnodejsnode_globalvue-list.cmd - npm ERR! Move it away, and try again.)
- Vue动态组件
- 01—Vue
- Django+Vue项目学习第二篇:vue项目创建
- Vue的7种事件修饰符的使用
- Vue学习第27天——路由vue-router的详解及案例练习
- Vue学习第14天——vue自定义事件及详细代码演示
- 【VUE】vue配置Gzip压缩
- vue:前端压缩图片上传
- 解决VsCode启动Vue项目报错:‘vue-cli-service‘ 不是内部或外部命令,也不是可运行的程序 或批处理文件。
- Vue键盘事件的使用