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 相关文章推荐
js之事件冒泡和事件捕获详细介绍
Oct 28 Javascript
jQuery 无限级菜单的简单实例
Feb 21 Javascript
JavaScript基础教程之alert弹出提示框实例
Oct 16 Javascript
JS实现一个按钮的方法
Feb 05 Javascript
详解vue父子组件间传值(props)
Jun 29 Javascript
在create-react-app中使用css modules的示例代码
Jul 31 Javascript
js jquery 获取某一元素到浏览器顶端的距离实现方法
Sep 05 jQuery
基于Vue组件化的日期联动选择器功能的实现代码
Nov 30 Javascript
详解vue中axios请求的封装
Apr 08 Javascript
javascript使用substring实现的展开与收缩文字功能示例
Jun 17 Javascript
解决vue 给window添加和移除resize事件遇到的坑
Jul 21 Javascript
JavaScript中关于预编译、作用域链和闭包的理解
Mar 31 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
PHP中如何判断exec函数执行成功?
2016/08/04 PHP
tp5框架基于Ajax实现列表无刷新排序功能示例
2020/02/10 PHP
如何在PHP中使用数组
2020/06/09 PHP
自动最大化窗口的Javascript代码
2013/05/22 Javascript
浅析javascript的间隔调用和延时调用
2014/11/12 Javascript
javascript实现校验文件上传控件实例
2015/04/20 Javascript
window.onload与$(document).ready()的区别分析
2015/05/30 Javascript
封装属于自己的JS组件
2016/01/27 Javascript
最细致的vue.js基础语法 值得收藏!
2016/11/03 Javascript
微信小程序image图片加载完成监听
2019/08/31 Javascript
基于JavaScript获取url参数2种方法
2020/04/17 Javascript
在Vue里如何把网页的数据导出到Excel的方法
2020/09/30 Javascript
[01:06]DOTA2小知识课堂 Ep.02 吹风竟可解梦境缠绕
2019/12/05 DOTA
Python中对象迭代与反迭代的技巧总结
2016/09/17 Python
使用XML库的方式,实现RPC通信的方法(推荐)
2017/06/14 Python
高效测试用例组织算法pairwise之Python实现方法
2017/07/19 Python
彻底搞懂Python字符编码
2018/01/23 Python
Python爬虫抓取代理IP并检验可用性的实例
2018/05/07 Python
解决Python一行输出不显示的问题
2018/12/03 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python调用staf自动化框架的方法
2018/12/26 Python
PyQt5 窗口切换与自定义对话框的实例
2019/06/20 Python
HTML5 标准将把互联网视频扔回到黑暗时代
2010/02/10 HTML / CSS
深入浅析HTML5中的SVG
2015/11/27 HTML / CSS
构造器Constructor是否可被override?
2013/08/06 面试题
请解释流与文件有什么不同
2016/07/29 面试题
办公室前台岗位职责
2014/01/04 职场文书
爱护草坪标语
2014/06/24 职场文书
医院领导班子整改方案
2014/10/01 职场文书
法定代表人身份证明书(含说明)
2014/10/02 职场文书
寒假社会实践个人总结
2015/03/06 职场文书
《称赞》教学反思
2016/02/17 职场文书
基于Golang 高并发问题的解决方案
2021/05/08 Golang
Redis集群新增、删除节点以及动态增加内存的方法
2021/09/04 Redis
「Manga Time Kirara MAX」2022年5月号封面公开
2022/03/21 日漫
使用vue判断当前环境是安卓还是IOS
2022/04/12 Vue.js