如何获取vue input的值

Question

<template> <div class="hello"> <div class="login"> <div class="input-wrapper"> <input class="input" type="text" placeholder="手机号" value=""/> </div> <div class="input-wrapper"> <input class="input" type="password" placeholder="密码" value=""/> </div> <div class="button" @click="login"> <text class="text">登陆</text> </div> </div> <!-- <toast id="toast"></toast>--> </div> </template> <script> //var modal = weex.requireModule('modal'); var modal = weex.requireModule('modal'); var stream = weex.requireModule('stream'); export default { methods: { login (event) { //alert('66'); stream.fetch({ method: 'GET', type: 'json', url: 'http://xxxxxx.com/xxx/xxx?username=ggjz&password=123' }, function(ret) { if(!ret.ok){ modal.toast({ 'message': '登陆失败', 'duration': 2.0 }) }else{ modal.toast({ message: '登陆成功', duration: 2.0 }) } }) }, } } </script> <style scoped> .input-wrapper{ margin-left: auto; margin-right: auto; } .input { font-size: 60px; height: 80px; width: 750px; } .text{ color: #666666; font-size: 60px; } .button { width: 200px; height: 80px; text-align: center; border-width: 2px; border-style: solid; border-color: rgb(162, 217, 192); background-color: rgba(162, 217, 192, 0.2); margin-top: 20px; margin-left: auto; margin-right: auto; } </style>

Answer 1

<input v-model="value"/>

data() {
  return {
    value: ''
  }
}

this.value //获取

Answer 2

你可以设置ref

<div class="input-wrapper">
        <input ref="phoneNum" class="input" type="text" placeholder="手机号"  value=""/>
      </div>
      <div class="input-wrapper">
        <input ref="pwdNum"  class="input" type="password" placeholder="密码" value=""/>
      </div>

获取
const phoneNum = this.$refs.phoneNum;
const pwdNum = this.$refs.pwdNum;

我在weex中是直接这样用的

 <input class="input" type="text" placeholder="手机号"  value="" @input="mobileInput($event)"/>

 mobileInput(e) {
                this.mobile = e.value;
            },

Answer 3

使用 v-model 处理用户输入

文档地址