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 相关文章推荐
对YUI扩展的Gird组件 Part-1
Mar 10 Javascript
JavaScript中Math对象使用说明
Jan 16 Javascript
js 页面执行时间计算代码
Mar 04 Javascript
新手常遇到的一些jquery问题整理
Aug 16 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
完美实现仿QQ空间评论回复特效
May 06 Javascript
JQuery中基础过滤选择器用法实例分析
May 18 Javascript
小巧强大的jquery layer弹窗弹层插件
Dec 06 Javascript
详解在WebStorm中添加Vue.js单文件组件的高亮及语法支持
Oct 21 Javascript
使用Vue.set()方法实现响应式修改数组数据步骤
Nov 09 Javascript
Vue中keep-alive组件的深入理解
Aug 23 Javascript
JavaScript实现点击切换验证码及校验
Jan 10 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 和 MySQL 基础教程(一)
2006/10/09 PHP
Symfony2学习笔记之系统路由详解
2016/03/17 PHP
tp5 sum某个字段相加得到总数的例子
2019/10/18 PHP
jquery实现的网页自动播放声音
2014/04/30 Javascript
加载列表时jquery获取ul中第一个li的属性
2014/11/02 Javascript
Javascript实现获取窗口的大小和位置代码分享
2014/12/04 Javascript
jqueryUI里拖拽排序示例分析
2015/02/26 Javascript
分享一些常用的jQuery动画事件和动画函数
2015/11/27 Javascript
深入探讨前端框架react
2015/12/09 Javascript
jquery实现企业定位式导航效果
2018/01/01 jQuery
Angularjs实现多图片上传预览功能
2018/07/18 Javascript
angular6的table组件开发的实现示例
2018/12/26 Javascript
Webpack 4如何动态切割JS注入文件名详解
2019/07/09 Javascript
Vue中常用rules校验规则(实例代码)
2019/11/14 Javascript
微信小程序获取复选框全选反选选中的值(实例代码)
2019/12/17 Javascript
Vue实现手机扫描二维码预览页面效果
2020/05/28 Javascript
JS箭头函数和常规函数之间的区别实例分析【 5 个区别】
2020/05/27 Javascript
[00:32]2018DOTA2亚洲邀请赛Liquid出场
2018/04/03 DOTA
[01:00:30]TFT vs VGJ.T Supermajor 败者组 BO3 第一场 6.5
2018/06/06 DOTA
Python中pygame安装方法图文详解
2015/11/11 Python
Python构建XML树结构的方法示例
2017/06/30 Python
python中利用Future对象异步返回结果示例代码
2017/09/07 Python
Python绘制3D图形
2018/05/03 Python
Pycharm无法显示动态图片的解决方法
2018/10/28 Python
ubuntu 18.04搭建python环境(pycharm+anaconda)
2019/06/14 Python
Django 自定义分页器的实现代码
2019/11/24 Python
详解python中GPU版本的opencv常用方法介绍
2020/07/24 Python
用python实现一个简单的验证码
2020/12/09 Python
NBA德国官方网上商店:NBA Store德国
2018/04/13 全球购物
C++程序员求职信
2014/05/07 职场文书
文化产业实施方案
2014/06/07 职场文书
空气的环保标语
2014/06/12 职场文书
经典团队口号大全
2014/06/21 职场文书
2015年助理工程师工作总结
2015/04/03 职场文书
《世界多美呀》教学反思
2016/02/22 职场文书
分位数回归模型quantile regeression应用详解及示例教程
2021/11/02 Python