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全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
JS使用replace()方法和正则表达式进行字符串的搜索与替换实例
Apr 10 Javascript
JavaScript实现简单图片翻转的方法
Apr 17 Javascript
jquery插件jquery.dragscale.js实现拖拽改变元素大小的方法(附demo源码下载)
Feb 25 Javascript
基于Layer+jQuery的自定义弹框
May 26 Javascript
JavaScript执行环境及作用域链实例分析
Aug 01 Javascript
Layui数据表格之获取表格中所有的数据方法
Aug 20 Javascript
微信小程序控制台提示warning:Now you can provide attr &quot;wx:key&quot; for a &quot;wx:for&quot; to improve performance解决方法
Feb 21 Javascript
关于layui 实现点击按钮添加一行(方法渲染创建的table)
Sep 29 Javascript
JQuery发送ajax请求时中文乱码问题解决
Nov 14 jQuery
JavaScript如何操作css
Oct 24 Javascript
vue 获取到数据但却渲染不到页面上的解决方法
Nov 19 Vue.js
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
基于CakePHP实现的简单博客系统实例
2015/06/28 PHP
php中html_entity_decode实现HTML实体转义
2018/06/13 PHP
js中几种去掉字串左右空格的方法
2006/12/25 Javascript
JavaScript中使用构造函数实现继承的代码
2010/08/12 Javascript
IE6/7/8/9不支持exec的简写方式
2011/05/25 Javascript
将form表单中的元素转换成对象的方法适用表单提交
2014/05/02 Javascript
JS中的form.submit()不能提交表单的错误原因
2014/10/08 Javascript
JavaScript实现数组在指定位置插入若干元素的方法
2015/04/06 Javascript
jquery专业的导航菜单特效代码分享
2015/08/29 Javascript
jQuery实现用户输入自动完成功能
2017/02/13 Javascript
Vue实现动态响应数据变化
2017/04/28 Javascript
基于pako.js实现gzip的压缩和解压功能示例
2017/06/13 Javascript
Nodejs 和Session 原理及实战技巧小结
2017/08/25 NodeJs
jQuery实现动态控制页面元素的方法分析
2017/12/20 jQuery
vue中实现移动端的scroll滚动方法
2018/03/03 Javascript
js中实例与对象的区别讲解
2019/01/21 Javascript
从0到1搭建Element的后台框架的方法步骤
2019/04/10 Javascript
微信小程序实现购物车代码实例详解
2019/08/29 Javascript
node.js中 mysql 增删改查操作及async,await处理实例分析
2020/02/11 Javascript
Vue2.x和Vue3.x的双向绑定原理详解
2020/11/05 Javascript
JS如何调用WebAssembly编译出来的.wasm文件
2020/11/05 Javascript
python爬虫的工作原理
2017/03/05 Python
基于python requests库中的代理实例讲解
2018/05/07 Python
pyftplib中文乱码问题解决方案
2020/01/11 Python
解决TensorFlow GPU版出现OOM错误的问题
2020/02/03 Python
Python 给下载文件显示进度条和下载时间的实现
2020/04/02 Python
Python通过递归函数输出嵌套列表元素
2020/10/15 Python
python中用ctypes模拟点击的实例讲解
2020/11/26 Python
CSS3实现大小不一的粒子旋转加载动画
2016/04/21 HTML / CSS
Staples英国官方网站:办公用品一站式采购
2017/10/06 全球购物
旺仔牛奶广告词
2014/03/20 职场文书
文明和谐家庭事迹材料
2014/05/18 职场文书
企业办公室主任岗位职责
2015/04/01 职场文书
教师创先争优承诺书
2015/04/27 职场文书
2016年推广普通话宣传周活动总结
2016/04/06 职场文书
JavaScript 反射学习技巧
2021/10/16 Javascript