Vue v-for中的 input 或 select的值发生改变时触发事件操作


Posted in Javascript onAugust 31, 2020

oninput 用法

<input type="text" id="myInput" oninput="myFunction()">
<script>
  function myFunction() {
 
  }
</script>

oninput 如果需要在Vue中使用则需要写成 v-on:input 还有绑定id的时候这样写:id="'m_num'+index" 注意m_num必须用单引号引起来

<input type="number" :id="'m_num'+index" v-on:input="jsMoney(index)">

jsMoney 方法

jsMoney:function(index){
 $("#m_num"+index).val()
}

onchange:input 中的文本修改后 在 input 失去焦点后触发

onblur:input 失去焦点后直接触发

oninput:input 文本输入时触发

补充知识:VUE项目中使用this.$forceUpdate();解决页面v-for中修改item属性值后页面v-if不改变的问题

页面展示:

Vue v-for中的 input 或 select的值发生改变时触发事件操作

实现效果:点击实现列表内容的展开、折叠。

代码:

<div class="invoice-list" v-for="(item,index) in invoiceData" :key="index">
 <div class="images"><img src="../../../../../static/images/invoice_pu.png" v-if="item.invoiceType == '0'"><img src="../../../../../static/images/invoice_zhuan.png" v-else-if="item.invoiceType == '1'"></div>
 <div class="text">
  <h3 v-if="item.invoiceType == '0'">增值税普通发票</h3>
  <h3 v-else-if="item.invoiceType == '1'">增值税专用发票</h3>
  <p><span>企业名称:</span>{{item.enterpriseName}}</p>
  <p><span>税号:</span>{{item.dutyParagraph}}</p>
  <transition name="fade">
  <div class="zhuanInfo" v-if="item.mark == true">
    <p><span>注册地址:</span>{{item.address}}</p>
    <p><span>联系电话:</span>{{item.contactNumber}}</p>
    <p><span>开户银行:</span>{{item.accountOpeningBank}}</p>
    <p><span>银行账号:</span>{{item.bankAccount }}</p>
  </div>
  </transition>
  <div class="zhuanMark" v-if="item.invoiceType == '1'">
   <p class="hideMark">
    <img src="../../../../../static/images/arrow_bottom.png" v-if="item.mark == false" @click="clickZhuanMark(index,$event)">
    <img src="../../../../../static/images/arrow_top.png" v-else @click="clickZhuanMark(index,$event)">
   </p>
  </div>
  <div class="list-radio"><input type="radio" value="" name="selectContact" @change="getInvoiceId(item.invoiceId)" /></div>
 </div>
</div>

v-for渲染出列表,在执行列表折叠展开时"clickZhuanMark" JS如下:

clickZhuanMark(val,event){
 this.invoiceData[val].mark = !this.invoiceData[val].mark;
 
},

可是实际并没有如设想的那样实现效果,之后修改代码:

Vue v-for中的 input 或 select的值发生改变时触发事件操作

添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。

以上这篇Vue v-for中的 input 或 select的值发生改变时触发事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
基于jQuery实现点击同时更改两个iframe的网址
Jul 01 Javascript
QUnit jQuery的TDD框架
Nov 04 Javascript
JSON 数据格式介绍
Jan 13 Javascript
js钢琴按钮波浪式图片排列效果代码分享
Aug 26 Javascript
基于JavaScript实现全屏透明遮罩div层锁屏效果
Jan 26 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
JavaScript类型系统之布尔Boolean类型详解
Jun 26 Javascript
jQuery on()方法绑定动态元素的点击事件无响应的解决办法
Jul 07 Javascript
JS类的定义与使用方法深入探索
Nov 26 Javascript
基于JS实现带动画效果的流程进度条
Jun 01 Javascript
说说Vue.js中的functional函数化组件的使用
Feb 12 Javascript
vue路由传参页面刷新参数丢失问题解决方案
Oct 08 Javascript
vue绑定数字类型 value为数字的实例
Aug 31 #Javascript
彻底搞懂并解决vue-cli4中图片显示的问题实现
Aug 31 #Javascript
详解Node.JS模块 process
Aug 31 #Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 #Javascript
vue自定义指令限制输入框输入值的步骤与完整代码
Aug 30 #Javascript
JS性能优化实现方法及优点进行
Aug 30 #Javascript
如何检测JavaScript中的死循环示例详解
Aug 30 #Javascript
You might like
Yii2如何批量添加数据
2016/05/17 PHP
javascript Xml增删改查(IE下)操作实现代码
2009/01/30 Javascript
通过判断JavaScript的版本实现执行不同的代码
2010/05/11 Javascript
jQuery随机切换图片的小例子
2013/04/18 Javascript
可自定义速度的js图片无缝滚动示例分享
2014/01/20 Javascript
JavaScript获取图片的原始尺寸以宽度为例
2014/05/04 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
JavaScript基于对象去除数组重复项的方法
2016/10/09 Javascript
jquery实现图片平滑滚动详解
2017/03/22 jQuery
VUE2实现事件驱动弹窗示例
2017/10/21 Javascript
jQuery实现通过方向键控制div块上下左右移动的方法【测试可用】
2018/04/26 jQuery
使用jquery Ajax实现上传附件功能
2018/10/23 jQuery
JS原生瀑布流效果实现
2019/04/26 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
手机浏览器唤起微信分享(JS)
2020/10/11 Javascript
vue中watch的用法汇总
2020/12/28 Vue.js
[02:46]2014DOTA2国际邀请赛 选手为你解读比赛MVP充满梦想
2014/07/09 DOTA
[52:31]VP vs Serenity 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
自动化Nginx服务器的反向代理的配置方法
2015/06/28 Python
基于Django统计博客文章阅读量
2019/10/29 Python
python基于plotly实现画饼状图代码实例
2019/12/16 Python
用HTML5制作烟火效果的教程
2015/05/12 HTML / CSS
Shopee菲律宾:在线购买和出售
2019/11/25 全球购物
Crabtree & Evelyn欧盟:豪华洗浴、身体和护发
2021/03/09 全球购物
C++是不是类型安全的
2014/02/18 面试题
如何写出高质量、高性能的MySQL查询
2014/11/17 面试题
董事长岗位职责
2013/11/30 职场文书
洗煤厂厂长岗位职责
2014/01/03 职场文书
2014年银行员工年终自我评价
2014/09/19 职场文书
小学生校园广播稿
2014/09/28 职场文书
2015婚礼主持词开场白
2015/05/28 职场文书
小学教师见习总结
2015/06/23 职场文书
团结友爱主题班会
2015/08/13 职场文书
浅谈Redis的几个过期策略
2021/05/27 Redis
关于python中readlines函数的参数hint的相关知识总结
2021/06/24 Python