vue获取input输入值的问题解决办法

vue获取input输入值的问题解决办法

v-for里有多行input输入框，vue怎么获取某行的输入的值，随便写了点代码，意思就是后台返回了多行的list集合，页面显示多行输入框，当修改某行的值时进行校验，输入错误友好提示下，后边加个清空按钮，点击清空当前行数据，最开始的想法是，用v-bind:value绑定值，这样就出现一种情况，页面输入的值无法获取到，v-bind不会修改原始list里的值，而且ref也不能动态绑定，ref只能全部获取，this.$refs.itemPriceRef[]，这样取的是所有输入框的值，是个数组，可以在提交前进行验证，但是无法判断某一行操作，并且vue操作DOM元素非常非常差，找了N多资料愣是没找到获取值的方法，最后发现用v-model直接绑定list里的值问题解决了，这样在修改时会直接修改list里的值，就不存在输入值和原始值不同的问题了，VUE在绑定值方面做挺方便的，刚开始学vue，用的不熟练，没想到这种方法，浪费了好多时间，不过也学会了很多东西。

PS:总结了3种方式获取页面输入框的值，1是用v-bind:value + ref方式获取，这种只适用有具体的输入框才行，

比如登录页，只有帐号密码输入框，

2是用v-model方式获取，这种是修改原始list值，所以在提交时，还需要遍历下原来的list，有点麻烦，

3是用v-model + ref 就是我写的这样，和2的区别是在提交时，直接用ref取值，感觉在未知数量的输入框时更好用

自己随便总结了下，估计在大神看来不值一提，但是对于我一个刚学习vue的人来说，确实浪费了我挺长时间，

花点时间记录下来，加深下印象。

<div v-model="skuList" v-for="(val, key) in skuList ">
<div>
<div>
<span>价格：</span>
<span><input type="text" v-model="val.price" ref="priceRef" v-on:change="checkPrice(val)"></span>

<pre name="code" class="html"><i v-on:click="dataClearStockPrice(val)"></i></pre></div><div><span>上限：</span><span><input class="stockTotal" type="text" v-model="val.stock" ref="totalRef"v-on:change="checkStock(val)"<span style="font-family:Arial,Helvetica,sans-serif"> ></span></span>
<pre></pre>
<p></p>
<pre></pre>
<pre name="code" class="html"><span style="font-family:Arial, Helvetica, sans-serif;"><i v-on:click="dataClearStockTotal(val)"></i>
</span></div>
</div>
</div></pre><pre name="code" class="html"></pre><pre name="code" class="html">    checkPrice:function (data) {
    var priceReg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;
    if(!priceReg.test(data.price)){
     Toast({message: "格式错误"});
     data.price = "";
    }
   },
   checkStock:function (data) {
    var totalReg = /^[0-9]*$/;
    if(!totalReg.test(data.stock)){
     Toast({message: "格式错误"});
     data.stock = "";
    }
   }，
   dataClearStockPrice:function(data){
    data.price = '';
   },
   dataClearStockTotal:function(data){
    data.stock = '';
   },</pre><br data-filtered="filtered">
<span style="white-space:pre" data-filtered="filtered"></span>
<pre name="code" class="html"></pre>
<p></p>
<p><br data-filtered="filtered">
</p>

如有疑问请留言或者到本站社区交流讨论，感谢阅读，希望能帮助到大家，谢谢大家对本站的支持！

赞 (0)

相关推荐

  • vue.js 1.x与2.0中js实时监听input值的变化

    vue.js 1.x与2.0中js实时监听input值的变化

    一.vuejs 2.0中js实时监听input 在2.0的版本中,vuejs把v-el 和 v-ref 合并为一个 ref 属性了,可以在组件实例中通过 $refs 来调用.这意味着 v-el:my-element 将写成这样: ref="myElement" , v-ref:my-component 变成了这样: ref="myComponent" .绑定在一般元素上时,ref 指DOM元素,绑定在组件上时,ref 为一组件实例. 因为 v-ref 不再是一个指令

  • Vue input控件通过value绑定动态属性及修饰符的方法

    对于单选按钮,勾选框及选择列表选项, v-model 绑定的 value 通常是静态字符串(对于勾选框是逻辑值): <!-- 当选中时,`picked` 为字符串 "a" --> <input type="radio" v-model="picked" value="a"> <!-- `toggle` 为 true 或 false --> <input type="check

  • Vue通过input筛选数据

    本文实例为大家分享了Vue通过input筛选数据的具体代码,供大家参考,具体内容如下 <div id="app"> <input v-model='search' /> <ul> <li v-for="item in items"> <label>价格</label><span v-html="item.name"></span> <label&

  • vue通过watch对input做字数限定的方法

    之前写了关于vue通过watch对input做字数限定的方法,最近需要回顾,就顺便发到随笔上了 <div id="app"> <input type="text" v-model="items.text" ref="count"/> <div v-html="number"></div> /div> new Vue({ el: '#app', data:

  • Vue中封装input组件的实例详解

    Vue中封装input组件的实例详解

    Vue中封装input组件 最近有点忙不过来 脱了很久,没有更新 抱歉.今天要将的时如何自定义封装input组件 ,博主知识发个简单的模板 码友们可以更具自己的实际项目添加需要的参数 我的项目中的UI图是这样的 代码如下 子组件的模板设置 <template> <div class="completion-input-box"> <span class="input-box-name">{{text}}</span>

  • vue.js中v-on:textInput无法执行事件问题的解决过程

    vue.js中v-on:textInput无法执行事件问题的解决过程

    前言 最近在学习vue.js框架,学习过程中遇到一些问题,所以记下其中遇到问题的解决过程,避免以后再遇到同样的问题,分享出来也方便遇到这个问题的朋友参考,下面话不多说了,来一起看看详细的介绍: 先来看这段示例代码 <div id="wrap"> <input type="text" v-on:textInput="fn"> </div> <script type="text/javascript

  • 详解.vue文件中监听input输入事件（oninput）

    详解.vue文件中监听input输入事件（oninput）

    .vue文件其实是一个组件,关于它的说明我之前也写过一篇文章,地址:.vue文件,今天这篇文章要讲的是.vue文件中监听input的输入值变化事件.需求是这页面中,改变input的值,就调用一个事件,第一想到的是oninput. oninput 事件在用户输入时触发,菜鸟教程中的用法是: 但是在.vue中这样写是没有作用的: <input type="text" id="cardsNum2" value="1" @oninput =&quo

  • vue2.0结合Element实现select动态控制input禁用实例

    vue2.0结合Element实现select动态控制input禁用实例

    今天有一个盆友问小颖,怎么实现用select动态控制input禁用,也就是说,input默认是可编辑的,但是每当我选一次select,input就会变成禁用,虽然小颖不知道她为什么这样做,因为小颖觉得为什么不直接把input设置成禁用的而要用动态的,选一次select禁用一次input,也就是说,input只有在select是没有点击过的时候是可编辑的,但凡我改变一次select的值,input就要被设置成禁用,其实没有必要,因为第一次设置成禁用后面已经不能再改变input的值了,不过当时小颖也

  • vue获取input输入值的问题解决办法

    vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行的输入的值,随便写了点代码,意思就是后台返回了多行的list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前行数据,最开始的想法是,用v-bind:value绑定值,这样就出现一种情况,页面输入的值无法获取到,v-bind不会修改原始list里的值,而且ref也不能动态绑定,ref只能全部获取,this.$refs.itemPriceRef[],这

  • vue获取input值的三种常用写法

    目录 1. v-model 表单输入绑定 2. @input 监听输入框 3. ref 获取数据 vue收集input[type=“checkbox”]的值 input[type=“checkbox”],勾选or不勾选 input[type=“checkbox”]多个时,哪些被选中 1. v-model 表单输入绑定 使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据,并对一些极端场景进行一些特殊处理.     <template>         <div>

  • vue判断input输入内容全是空格的方法

    比如input中的数据和data中的msg双向绑定. 那么我们可以  判断先把msg以空格拆分成数组,然后拼接起来,判断字符串的长度,如果长度为0,证明输入的就全是空格了,如下: msg.split(" ").join("").length = 0 以上这篇vue判断input输入内容全是空格的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们. 您可能感兴趣的文章: vue获取input输入值的问题解决办法 详解.vue文件中监听in

  • IOS 下获取 rootviewcontroller 的版本不同的问题解决办法

    IOS 下获取 rootviewcontroller 的版本不同的问题解决办法 一般 原生的 [[UIApplication sharedApplication].keyWindow.rootViewController presentModalViewController:self animated:NO]; 可以 获取  系统的  rootviewcontroller 但 cocos2d-x 2.1.1 在 appcontroller.mm 内定义的 加载方法是 // Set RootVie

  • vue给input file绑定函数获取当前上传的对象完美实现方法

    HTML <input type="file" @change="tirggerFile($event)"> JS(vue-methods) tirggerFile : function (event) { var file = event.target.files; // (利用console.log输出看结构就知道如何处理档案资料) // do something... } 如果直接在绑定的函数中传入this,则不能正确获取,且不能获取到相关的inp

  • python中使用input()函数获取用户输入值方式

    我们编写程序最终目的还是来解决实际问题,所以必然会遇到输入输出的交互问题,python中提供了input函数用来获取用户的输入,我们可以用以下程序演示. user_gender = input("Please enter your gender(F/M):") print(f'Your gender is {user_gender}') 要注意的是在sublime编辑器中不支持input的在线输入,所以我们需要去cmd窗口运行这个程序,结果如下所示: 要注意的是input的返回值是字符

  • vue脚手架安装以及安装失败问题解决办法

    vue脚手架安装以及安装失败问题解决办法

    目录 前言 一.脚手架的命令安装 1.1 命令查看版本信息 1.2 通过键入命令安装脚手架 二.node.js环境安装 附:vue安装vue脚手架(vue-cli)错误总结 总结 前言 在不少小伙伴学习使用vue的过程中,vue 的脚手架安装几乎是无可避免的:但是因为电脑配置.网络等等的问题会造成部分小伙伴的脚手架安装失败. 那我们本着遇到问题解决问题,没有问题创造问题的态度进行本期的问题解决.若发现文中有部分内容比较基础请酌情跳过,在刚开始学习的路上,总是有很多小白宝们不太懂,我也是这样过来的

  • vue中使用@blur获取input val值

    目录 使用@blur获取input val值 vue表单input 框使用@blur事件 使用@blur获取input val值 @blur="validScore($event)" validScore(event){ alert(event.target.value) } vue表单input 框使用@blur事件 input 框失去焦点 ,便会触发定义的方法 form表单代码 <el-form-item label="身份证号码:" prop="

  • vue 限制input只能输入正数的操作

    在某些项目中 input 框只能输入数字,可以用以下办法: 先在标签上绑定上 @input 事件来监听标签的值变化,通过正则来改变输入的值. <input class="keep_input" v-number-only style="width:35px" v-model="scope.row.fileOrder" @input="scope.row.fileOrder = Number($event.target.value.

  • vue组件的路由高亮问题解决方法

    vue组件的路由高亮问题解决方法

    前言 之前我对于路由的高亮都是使用缓存,给他的所有路由遍历一遍,每点击一下的时候,给他的当前值高亮,赋值active.后来发现一刷新就不行,高亮的就变成默认值0了,这里主要是讲这个问题的解决办法. 第一种是通过这样的添加类: .router{ font: 12px/40px '微软雅黑'; background: pink; background: pink; color: white; cursor: pointer; text-align: center; display: inline-b

随机推荐