精华内容
下载资源
问答
  • 由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架这里的重点是:@input=”search($event)”,表示当文本框有内容输入时,则调用search方法/*模糊搜索*/search: function (event) {//...

    由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架

    这里的重点是:@input=”search($event)”,表示当文本框有内容输入时,则调用search方法

    /*模糊搜索*/

    search: function (event) {

    //方法一:直接通过event.data可以获得文本内容

    if(event.data!=null){

    this.materialName = event.data;

    }

    //方法二:获取DOM对象取value值

    this.materialName = event.currentTarget.value;

    //方法三:通过

    拓展知识:

    如下所示:

    0ee4d5882d266fb7aec7aac5d7991cdf.png

    script部分:

    export default {

    data:function(){

    return {

    input1:'',

    input2:'',

    input3:'',

    ifExist:'',

    }

    },

    }

    在页面中插入一个隐藏域:

    {{ exitsVal }}

    利用

    computed:{

    exitsVal:function(){

    this.ifExist=Number(Boolean(this.userName))+Number(Boolean(this.mailCode))+Number(Boolean(this.mailAd));

    }

    },

    用watch监听data中 ifExist的值

    watch:{

    ifExist(newVal,oldVal){

    if(Number(newVal) === 3){

    三个input框内都有值时需要做的操作

    }else{

    至少一个没有值

    }

    }

    }

    以上这篇开发者。

    展开全文
  • vue获取input输入值的问题解决办法 v-for里有多行input输入框,vue怎么获取某行输入的值,随便写了点代码,意思就是后台返回了多行list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下...
  • vue获取input输入值的问题解决办法v-for里有多行input输入框,vue怎么获取某行输入的值,随便写了点代码,意思就是后台返回了多行list集合,页面显示多行输入框,当修改某行的值时进行校验,输入错误友好提示下...

    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的人来说,确实浪费了我挺长时间,

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

    价格:

    上限: >
        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 = '';

    },

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

    展开全文
  • 获取input的value值

    2020-08-19 11:07:09
    input id='username' class='username' ref="username" type="text" value="" v-model='username' placeholder="账号"> 1.原生js方法 var username = document.getElementById('username').value; 2.jq方法 var...
    <input id='username' class='username'  ref="username" type="text"  value="" v-model='username' placeholder="账号">
    

    1.原生js方法

    var username = document.getElementById('username').value;
    

    2.jq方法

    var username = $('#username').val();
    

    3.vue v-model方法

    var username = this.username
    
    1. vue 不适用v-mmodel,使用 $ref方法
    var usernme = this.$refs.username.value
    
    展开全文
  • vue获取input输入值的问题

    万次阅读 2017-05-24 17:39:33
    v-for里有多行input输入框,vue怎么获取某行输入的值,随便写了点代码,意思就是后台返回了多行list集合,页面显示多行输入框,当修改 某行的值时进行校验,输入错误友好提示下,后边加个清空按钮,点击清空当前...

    公司需要,新学VUE,碰到一些坑记录下。

     多行文本框取值问题。

    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>
    <i v-on:click="dataClearStockPrice(val)"></i>
    </div><div><span>上限:</span><span><input class="stockTotal" type="text" v-model="val.stock" ref="totalRef"v-on:change="checkStock(val)" ></span>
    
    

    
    
    <i v-on:click="dataClearStockTotal(val)"></i>
    </div>
    </div>
    </div>
           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 = '';
          },

    
    


    展开全文
  • 原生 js使用 getElementById 比较麻烦地方需要为元素...这种情况使用 v-model 最方便,通过 this.inputName 即可获取到对应的值input 有默认值。即,设置了 value 属性 Input。这种情况不能使用 v-model。否则...
  • 通常在列表中我们要给每一个项填写不同的值,并获取他们的值,在Vue,uniapp,小程序可以用到。 1.以uniapp为例在v-for循环语句上写一个点击事件,传入必要参数像order_id。代码如下 <template> <view ...
  • vue获取遍历出来的input的值

    千次阅读 2019-10-09 10:29:13
    <li v-for="(kxz, index) in kxz " id="wz1"> <div class="grid-content bg-purple input"> <input class="text_fz" :id="'text'+index" type="text" :value=kxz.wz> &l...
  • <template> <div class="input_group"> <label :for="name">{{name}}</label> <input :type="type" :value = "value" :placeholder="place...
  • 前言近期项目中遇到 v-for 动态控制 input输入框显示功能,但只有一个input框,使用v-model 绑定一个会导致输入框内所有同步更改,那如何获取每个input框内的值呢 ? 废话不多说,先上图主要思路在input 上...
  • 话不多说,解决问题是关键,直接开干: ... <div class="layui-form-item"> <div class="layui-inline">...label class="layui-form-label">...div class="layui-input-inline" sty...
  • <input class="ItemInput" type="number" @input="firstInput"> firstInput: function(e) { console.log(e) console.log(e.target) console.log(e.target.value) console.log(e.currentTarget); } ...
  • Vue中使用 Ant Design of Vue 中的表单Form时如何获取input的值 下面通过this.form.getFieldValue(“上边的名字”),获取到input的 或者通过ref属性也可以获取到input的 首先给标签加上ref=“一个名字” 下面...
  • vue中如何获取input的值

    千次阅读 2019-09-21 15:01:30
    HTML: <input type="number" ref="abc"> JS: var id=this.$refs.abc.value; 或者使用v-model HTML: <input :type="inputType2" v-model="password" class="PwdInput" ...
  • vue中获得input的值

    万次阅读 2018-05-19 16:16:48
    原生 js使用 getElementById 比较麻烦地方需要为元素...这种情况使用 v-model 最方便,通过 this.inputName 即可获取到对应的值input 有默认值。即,设置了 value 属性 Input。这种情况不能使用 v-model。否则...
  • Vue获取表单的值

    2020-07-24 08:14:34
    Vue自带一个特别神奇的...当改变input的值,对应的p标签的也会发生改变,修改p标签的,input里面的也会发生改变。 <div id="example-3"> <input type="checkbox" id="jack" value="JACK" v-model="ch
  • 从子组件中获取一个input的值 子组件 <template> <div> <input type="text" class="form-control" id="inputEmail3" placeholder="test" v-on:input="input_name($event.target.value)"> </...
  • Vue event.target.value( ) 获取当前文本框的值(由事件触发时) 情景描述:假设当前有一个文本框,当我输入内容之后,回车或者点击一个按钮, 我们在这个input 上或者这个按钮上绑定事件,触发事件之后执行相应...
  • 1.给需要获取value值的单选框设置同一个点击事件,传入event当前事件对象 &amp;amp;lt;template&amp;amp;gt; &amp;amp;lt;div&amp;amp;gt; &amp;amp;lt;label&amp;amp;gt;&amp;amp;lt;...
  • Vue event.target.value( ) 获取当前文本框的值(由事件触发时)情景描述:假设当前有一个文本框,当我输入内容之后,回车或者点击一个按钮, 我们在这个input 上或者这个按钮上绑定事件,触发事件之后执行相应...
  • 前言 本文使用了lable关联选中,实际使用中如果不需要,直接将循环语句 v-for 写在 input标签上就可以 1、使用v-for循环radio单选框 01)需要注意是,这是使用是 ... :value=item.value @change=getRadioVal
  • <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>页面标题<...script src="https://cdn.suoluomei.com/common/js2.0/vue/v2.5.16/vu...
  • VUE监听循环多个input值获取方法

    千次阅读 2020-04-22 08:50:36
    我们在获取后端数据时候,有时候会在列表中生成很多的input,而我们又想实时监听这些input时要如何处理呢 <tr v-for="(item,index) in bstp" v-if="bstp"> <td><input type="text" name="" @input...
  • 不知道大家有没有遇到过这样问题,最近我遇到过一次,就是在vue内使用input标签时,value可以绑定动态也可以获取,但是自定义属性绑定动态后就是获取不到,打印也是undefined,各种查资料也无法得到答案,...
  • i-input :value.sync="value" placeholder="请输入申请城市/订单号码" style="width: 300px;height: 30px"  class="rebuildInp" v-model='str'&gt;&lt;/i-...
  • Vue获取html控件

    2020-07-23 16:41:16
    HTML代码 <input type="text" ref='myedit' /> Vue代码 var tt= this.$refs.myedit.value; console.log(tt);
  • 首先input的值是个变量,需要在子组件的data中定义声明变量value值。 input子组件: <script> export default { name: 'Input', data () { return { value: '' } } } </script...
  • 话不多说,直接上代码: <label v-for="(item,index) in radioData" :key="index">...input type="radio" :value="item.value" @click="getRadioVal(item.value)"> {{item.value}} </label>...
  • Vue event.target.value( ) 获取当前文本框的值(由事件触发时)情景描述:假设当前有一个文本框,当我输入内容之后,回车或者点击一个按钮,我们在这个input 上或者这个按钮上绑定事件,触发事件之后执行相应...

空空如也

空空如也

1 2 3 4 5 ... 9
收藏数 166
精华内容 66
关键字:

vue获取input的value值

vue 订阅