Vue v-for中的 input 或 select的值发生改变时触发事件操作

 更新时间:2020年08月31日 09:05:12   作者:xingxingxingge  
这篇文章主要介绍了Vue v-for中的 input 或 select的值发生改变时触发事件操作,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧

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不改变的问题

页面展示:

实现效果:点击实现列表内容的展开、折叠。

代码:

<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;
 
},

可是实际并没有如设想的那样实现效果,之后修改代码:

添加this.$forceUpdate();进行强制渲染,效果实现。搜索资料得出结果:因为数据层次太多,render函数没有自动更新,需手动强制刷新。

以上这篇Vue v-for中的 input 或 select的值发生改变时触发事件操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • vue3+vite引入插件unplugin-auto-import的方法

    vue3+vite引入插件unplugin-auto-import的方法

    这篇文章主要介绍了vue3+vite引入插件unplugin-auto-import的相关知识,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值 ,需要的朋友可以参考下
    2022-10-10
  • Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    Vue3项目打包后部署到服务器 请求不到后台接口解决方法

    在本篇文章里小编给大家整理了关于Vue3项目打包后部署到服务器 请求不到后台接口解决方法,有需要的朋友们可以参考下。
    2020-02-02
  • Vue实现登录以及登出详解

    Vue实现登录以及登出详解

    本篇文章主要介绍了vue实现登陆登出的实现示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-09-09
  • Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    Vue自定义指令实现弹窗拖拽四边拉伸及对角线拉伸效果

    小编最近在做一个vue前端项目,需要实现弹窗的拖拽,四边拉伸及对角线拉伸,以及弹窗边界处理功能,本文通过实例代码给大家分享我的实现过程及遇到问题解决方法,感兴趣的朋友一起看看吧
    2021-08-08
  • npm ERR! code 128的错误问题解决方法

    npm ERR! code 128的错误问题解决方法

    这篇文章主要介绍了解决npm ERR! code 128的错误问题,本文给大家讲解的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-02-02
  • Vue Steps步骤条渲染异常问题

    Vue Steps步骤条渲染异常问题

    这篇文章主要介绍了Vue Steps步骤条渲染异常问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
    2024-04-04
  • Vue插件写、用详解(附demo)

    Vue插件写、用详解(附demo)

    本篇文章主要介绍了Vue插件写、用详解(附demo),插件就是指对Vue的功能的增强或补充。有兴趣的可以了解一下。
    2017-03-03
  • Vue父子组件传值的一些坑

    Vue父子组件传值的一些坑

    这篇文章主要介绍了Vue父子组件传值的一些坑,帮助大家更好的理解和使用vue父子组件,感兴趣的朋友可以了解下
    2020-09-09
  • Ant Design Vue 走马灯实现单页多张图片轮播效果

    Ant Design Vue 走马灯实现单页多张图片轮播效果

    这篇文章主要介绍了Ant Design Vue 走马灯实现单页多张图片轮播,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2022-07-07
  • Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法

    Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法

    这篇文章主要介绍了Vue3中实现拖拽和缩放自定义看板 vue-grid-layout的方法,本文结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-03-03

最新评论