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 相关文章推荐
CSS+Table图文混排中实现文本自适应图片宽度(超简单+跨所有浏览器)
Feb 14 Javascript
jQuery 学习 几种常用方法
Jun 11 Javascript
JSON 学习之JSON in JavaScript详细使用说明
Feb 23 Javascript
js写出遮罩层登陆框和对联广告并自动跟随滚动条滚动
Apr 29 Javascript
浅析上传头像示例及其注意事项
Dec 14 Javascript
JavaScript实现鼠标点击导航栏变色特效
Feb 08 Javascript
Angular模板表单校验方法详解
Aug 11 Javascript
javascript将json格式数组下载为excel表格的方法
Dec 22 Javascript
Angular 4.x+Ionic3踩坑之Ionic 3.x界面传值详解
Mar 13 Javascript
JavaScript实现轮播图效果代码实例
Sep 28 Javascript
vue elementUI 表单校验的实现代码(多层嵌套)
Nov 06 Javascript
Vue+Bootstrap收藏(点赞)功能逻辑与具体实现
Oct 22 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
yii框架builder、update、delete使用方法
2014/04/30 PHP
浅析ThinkPHP缓存之快速缓存(F方法)和动态缓存(S方法)(日常整理)
2015/10/26 PHP
php封装实现钉钉机器人报警接口的示例代码
2020/08/08 PHP
js中string转int把String类型转化成int类型
2014/08/13 Javascript
JQuery 的跨域方法推荐_可跨任何网站
2016/05/18 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
微信小程序 数据封装,参数传值等经验分享
2017/01/09 Javascript
w3c编程挑战_初级脚本算法实战篇
2017/06/23 Javascript
使用JS和canvas实现gif动图的停止和播放代码
2017/09/01 Javascript
Vue二次封装axios为插件使用详解
2018/05/21 Javascript
Vue中computed、methods与watch的区别总结
2019/04/10 Javascript
在JavaScript中使用严格模式(Strict Mode)
2019/06/13 Javascript
Vue数字输入框组件使用方法详解
2020/02/10 Javascript
[14:57]DOTA2 HEROS教学视频教你分分钟做大人-幽鬼
2014/06/13 DOTA
Python BeautifulSoup中文乱码问题的2种解决方法
2014/04/22 Python
python使用pandas实现数据分割实例代码
2018/01/25 Python
python 两种方法修改文件的创建时间、修改时间、访问时间
2020/09/26 Python
英国著名的化妆品折扣网站:Allbeauty.com
2016/07/21 全球购物
Bobbi Brown芭比波朗美国官网:化妆师专业彩妆保养品品牌
2016/08/18 全球购物
朗仕(Lab series)英国官网:雅诗兰黛集团男士专属护肤品牌
2017/11/28 全球购物
英国皇室御用百货:福南梅森(Fortnum & Mason)
2017/12/03 全球购物
Club Monaco加拿大官网:设计师男女服装
2019/09/29 全球购物
亿阳信通股份有限公司C#笔试题
2016/12/06 面试题
经济系大学生求职信
2013/10/01 职场文书
会计出纳岗位职责
2013/12/25 职场文书
竞选演讲稿范文
2013/12/28 职场文书
小学生安全演讲稿
2014/04/25 职场文书
优秀员工推荐信
2014/05/10 职场文书
财政局党的群众路线教育实践活动整改方案
2014/09/21 职场文书
2014镇副书记群众路线专题民主生活会思想汇报
2014/09/23 职场文书
企业整改报告范文
2014/11/08 职场文书
2014年资料员工作总结
2014/11/18 职场文书
2014年人事部工作总结
2014/12/03 职场文书
企业培训简报范文
2015/07/20 职场文书
2015年学校教科室工作总结
2015/07/20 职场文书
Mysql数据库手动及定时备份步骤
2021/11/07 MySQL