vue获取input值的方法总结

红太狼 2022-12-04 09:13 390阅读 0赞

##### 1、v-model：使用v-model创建双向数据绑定, 用来监听用户的输入事件以更新数据 #####

<template>
           <input
                placeholder="请输入你的手机号码"
                type="number"
                v-model="number"
              />
              
           <input
                placeholder="请输入密码"
                type="password"
                v-model="password"
              />
                 <input
                type="button"
                value="登陆"
                @click="toLogin"
              />
    </template>
    <script>
         export default { 
                name: 'Login',
                data() { 
                return { 
                    number: '',
                    password: ''
                }
            },
            methods: { 
                toLogin() { 
                       console.log("登陆手机号:",this.number);
                       console.log("登陆密码:",this.password);
                }
            }
        }
          }
    </script>

##### 2、通过ref获取dom元素，再获取值（类似于原生的获取dom元素） #####

<template>
           <input
                type="text"
                ref="textDom"
              />
    </template>
    <script>
         export default { 
                name: 'Login',
            methods: { 
                getText() { 
                var textVal = this.$refs.textDom.value;
                console.log("输入的文本内容是:",textVal);
                }
            }
        }
          }
    </script>

##### 3、@input 监听输入框，输入框只要输入的值变化了就会触发 input 调用方法实时通过 event.currentTarget.value 获取到数据 #####

<template>
    	  <div class="class">
    	    <div>
    	      <input type="text" @keyup.enter="textInput" @input="textInput(event)"/>
    	    </div>
    	  </div>
    	</template>
    	<script>
        export default { 
          name: "textInput",
          data() { 
          },
          methods: { 
    	        textInput(event){ 
    	          console.log("输入的文本内容是:",event.currentTarget.value)
    	        }
          	}
        }
       </script>