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 相关文章推荐
JavaScript XML操作 封装类
Jul 01 Javascript
JavaScript的public、private和privileged模式
Dec 28 Javascript
js遍历、动态的添加数据的小例子
Jun 22 Javascript
jquery交替变换颜色的三种方法 实例代码
Nov 19 Javascript
jquery基础教程之数组使用详解
Mar 10 Javascript
JavaScript组件开发完整示例
Dec 15 Javascript
手机图片预览插件photoswipe.js使用总结
Aug 25 Javascript
微信小程序 轮播图swiper详解及实例(源码下载)
Jan 11 Javascript
Angular2 父子组件数据通信实例
Jun 22 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 Javascript
JavaScript中isPrototypeOf函数
Nov 07 Javascript
JS中forEach()、map()、every()、some()和filter()的用法
May 11 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中mail函数发送邮件失败的解决方法
2014/12/24 PHP
php将金额数字转化为中文大写
2015/07/09 PHP
java模拟PHP的pack和unpack类
2016/04/13 PHP
微信随机生成红包金额算法php版
2016/07/21 PHP
php菜单/评论数据递归分级算法的实现方法
2019/08/01 PHP
Mootools 1.2教程 定时器和哈希简介
2009/09/15 Javascript
jQuery元素的隐藏与显示实例
2015/01/20 Javascript
7个让JavaScript变得更好的注意事项
2015/01/28 Javascript
如何编写高质量JS代码(续)
2015/02/25 Javascript
简介JavaScript中POSITIVE_INFINITY值的使用
2015/06/05 Javascript
JavaScript实现非常简单实用的下拉菜单效果
2015/08/27 Javascript
详解JavaScript中的4种类型识别方法
2015/09/14 Javascript
Vue.js计算属性computed与watch(5)
2016/12/09 Javascript
JS实现AES加密并与PHP互通的方法分析
2017/04/19 Javascript
vue2.5.2使用http请求获取静态json数据的实例代码
2018/02/27 Javascript
angularjs $http调用接口的方式详解
2018/08/13 Javascript
详解Vue中watch的详细用法
2018/11/28 Javascript
小程序显示弹窗时禁止下层的内容滚动实现方法
2019/03/20 Javascript
性能优化篇之Webpack构建速度优化的建议
2019/04/03 Javascript
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
[52:52]完美世界DOTA2联赛PWL S3 LBZS vs access 第一场 12.10
2020/12/13 DOTA
使用python编写android截屏脚本双击运行即可
2014/07/21 Python
Eclipse和PyDev搭建完美Python开发环境教程(Windows篇)
2016/11/16 Python
python实现基于SVM手写数字识别功能
2020/05/27 Python
python的Crypto模块实现AES加密实例代码
2018/01/22 Python
Python实现网站表单提交和模板
2019/01/15 Python
Python如何在windows环境安装pip及rarfile
2020/06/15 Python
Python 防止死锁的方法
2020/07/29 Python
HTML5在canvas中绘制复杂形状附效果截图
2014/06/23 HTML / CSS
美国保健品专家:Life Extension
2018/05/04 全球购物
shell程序中如何注释
2012/01/28 面试题
学生实习介绍信
2014/01/15 职场文书
毕业实习自我鉴定范文2014
2014/09/26 职场文书
妇联2016年六一国际儿童节活动总结
2016/04/06 职场文书
一文搞懂redux在react中的初步用法
2021/06/09 Javascript
Apache Hudi 加速传统的批处理模式
2022/04/24 Servers