如何获取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 处理用户输入

文档地址

Answer 4

v-model 双向绑定