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>
            <input class="login-input" type="text"  v-model="username" placeholder="请输入账号">
            <input class="login-input" type="password" v-model="password" placeholder="请输入密码">
            <div class="login-button" @click="login" type="submit">登陆</div>
        </div>
    </template>
    <script>
    export default {
       name: 'Login',
        data() {
            return {
                username: '',
                password: ''
            }
        },
        methods: {
            login() {
                   console.log(this.username)
                   console.log(this.password)
            }
        }
    }
    <script/>

2. @input 监听输入框

输入框只要输入的值变化了就会触发 input 调用 search 数据实时获取通过 event.currentTarget.value 获取到

    <template>
      <div class="class">
        <div>
          <input type="text" @keyup.enter="search" @input="search($event)"/>
        </div>
      </div>
    </template>
    <script>
    export default {
      name: "search",
      data() {
      },
      methods: {
            search(event){
              console.log(event.currentTarget.value)
            }
          }
    }
   </script>

3. ref 获取数据

这种方式类似于原生DOM,但是ref获取数据更方便

    <template>
      <div class="class">
          <input type="text" ref="getValue" />
          <button @click="subbmitButton">获取表单数据</button>
      </div>
    </template>
    <script>
    export default {
      name: "page",
      data() {
      },
      methods: {
            subbmitButton(){
              console.log(this.$refs.getValue.value)
            }
          }
    }
  </script>

vue收集input[type=“checkbox”]的值

input[type=“checkbox”]，勾选or不勾选

要控制input[type=“checkbox”]勾选或不勾选，有以下两种方式，

  • v-model="isDone"。isDone为true时，勾选；isDone为false时，不勾选
  • :checked="isDone"。isDone为true时，勾选，isDone为false时，不勾选

注意哈！！此时isDone必须初始化为布尔值（或者可布尔化的类型，如字符串，数值，非0即1）

v-model

<body>
    <div id="root">
        <input type="checkbox" v-model="isDone"/>已经完成
        <button @click="handleClick">勾选/去勾选</button>
    </div>

    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data(){
            return {
                isDone:false
            }
        },
        methods: {
            handleClick(){
                this.isDone = !this.isDone;
            }
        },
        watch:{
            isDone:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        }
    })
    </script>
</body>

:checked

<body>
    <div id="root">
        <input type="checkbox" :checked="isDone"/>已经完成
        <button @click="handleClick">勾选/去勾选</button>
    </div>

    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data(){
            return {
                isDone:false
            }
        },
        methods: {
            handleClick(){
                this.isDone = !this.isDone;
            }
        },
        watch:{
            isDone:{
                immediate:true,
                handler(newValue,oldValue){
                    console.log(newValue,oldValue);
                }
            }
        }
    })
    </script>
</body>

input[type=“checkbox”]多个时，哪些被选中

多个input[type="checkbox"]时，想知道哪些被选中，使用v-model，如v-model="hobbies"。

注意哈！！此时hobbies必须初始化为数组。

<body>
    <div id="root">
        <label><input type="checkbox" name="hobby" value="football" v-model="hobbies"/>足球</label><br/>
        <label><input type="checkbox" name="hobby" value="basketball" v-model="hobbies"/>篮球</label><br/>
        <label><input type="checkbox" name="hobby" value="tennis" v-model="hobbies"/>网球</label>
    </div>

    <script>
    Vue.config.productionTip = false;
    new Vue({
        el:"#root",
        data(){
            return {
                hobbies:[]
            }
        },
        watch:{
            hobbies:{
                immediate:true,
                handler(newValue){
                    console.log(newValue);
                }
            }
        }
    })
    </script>
</body>

以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。

赞 (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值方法

    由于项目需要做实时搜查询数据,所以需要监听input标签的value,这里使用的前端框架vue <input id="materialSearch" type="text" @keyup.enter="search" @input="search($event)"/> 这里的重点是:@input="search($event)",表示当文本框有内容输入时,则调用search方法 /*模糊搜索*/

  • 利用JS响应式修改vue实现页面的input值

    前言 大部分人在看到这篇文章的标题时第一时间可能有点懵,我先简单介绍一下背景: 公司有一个基于Vue实现的登录中心是我负责维护的,页面上是一个常规的登录界面,用户名输入框.密码输入框和登录按钮各一个 今天有个同事(之后简称A)过来找我问到这么一个问题: 他负责的应用将登录中心集成到了APP端,他接到的需求是希望在APP端拉起登录页面时,自动将用户帐号和密码填入,然后自动点击登录. 开始正题 我们把登录页面简化成以下代码 <template> <div> <input name

  • 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>

  • React获取input值并提交的2种方法实例

    方法一  利用DOM提供的Event对象的target事件属性取值并提交 import React from 'react'; class InputDemo extends React.Component{ state = { InputValue : "",//输入框输入值 }; handleGetInputValue = (event) => { this.setState({ InputValue : event.target.value, }) }; handlePos

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

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

  • 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 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

  • jQuery获取多种input值的简单实现方法

    获取input的checked值是否为true: 第一种: if($("input[name=item][value='val']").attr('checked')==true) //判断是否已经打勾 --注:name即控件name属性,value即控件value属性 第二种: 可以不指定属性值,因一组checkbox的value值都会保存其在数据库中对应的id,最好写成如下方式: if($("input[name=row_checkbox]").attr('ch

  • jquery获取input type=text中的值的各种方式(总结)

     实例如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>JQuery获取文本框的值</title> <meta h

  • Jquery把获取到的input值转换成json

    话不多说,请看代码: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title> jquery把获取

  • PHP获取input输入框中的值去数据库比较显示出来

    前端: <!--商品查询--> <input type="text" name="bianhao" value="" maxlength="10" size="10" style="width:100px; margin:0px 0px 0px 25px;height:20px;"/> <input type="submit" value

随机推荐