vue+elementui 获取el-input的值

可以使用v-model指令绑定input的值，例如：

<el-input v-model="inputValue"></el-input>

然后在Vue实例中可用data选项定义inputValue，如：

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

通过这样的方式，inputValue的值就可以获取到el-input输入框中的值。

相关问题

vue+elementUI实现el-input只能输入英文，数字，空格和日文平假名

可以使用正则表达式限制el-input只能输入英文、数字、空格和日文平假名。

在el-input中添加一个属性：:onkeypress="isValidInput($event)"，并在Vue实例中定义一个方法isValidInput，如下所示：

<template>
  <el-input v-model="inputValue" placeholder="请输入" :onkeypress="isValidInput($event)"></el-input>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  },
  methods: {
    isValidInput(event) {
      const charCode = event.charCode;
      const validChars = /^[a-zA-Z0-9 ぁ-んァ-ンー-龥]*$/; // 正则表达式
      if (!validChars.test(String.fromCharCode(charCode))) {
        event.preventDefault();
      }
    }
  }
}
</script>

在isValidInput方法中，我们使用了正则表达式/^[a-zA-Z0-9 ぁ-んァ-ンー-龥]*$/，它匹配所有英文、数字、空格，以及日文平假名和片假名。

当用户输入一个字符时，onkeypress事件会触发isValidInput方法。我们获取输入字符的ASCII码，然后使用正则表达式测试该字符是否是合法字符。如果不是，我们就调用event.preventDefault()方法阻止输入字符。

这样就实现了el-input只能输入英文、数字、空格和日文平假名的功能。

vue+elementui的el-form+axios的api接口怎么配合使用

可以先在el-form的submit方法中使用axios发送请求，具体的方法如下：

在template中：

<el-form ref="form" :model="form" :rules="rules" label-width="120px">
  <el-form-item label="用户名" prop="username">
    <el-input v-model="form.username"></el-input>
  </el-form-item>
  <el-form-item label="密码" prop="password">
    <el-input type="password" v-model="form.password"></el-input>
  </el-form-item>
  <el-form-item>
    <el-button type="primary" @click="submitForm">提交</el-button>
    <el-button @click="resetForm">重置</el-button>
  </el-form-item>
</el-form>

在script中：

import axios from 'axios';
export default {
  data() {
    return {
      form: {
        username: '',
        password: ''
      },
      rules: {
        username: [{ required: true, message: '请输入用户名', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    };
  },
  methods: {
    submitForm() {
      this.$refs.form.validate(valid => {
        if (valid) {
          axios.post('/api/login', this.form).then(response => {
            if (response.data.code === 200) {
              // 登录成功，跳转到首页
              this.$router.push('/home');
            } else {
              this.$message.error('登录失败');
            }
          });
        } else {
          return false;
        }
      });
    },
    resetForm() {
      this.$refs.form.resetFields();
    }
  }
};

在上述代码中，我们先引入了axios，使用axios发送POST请求到后台的/api/login接口，参数为表单中的form数据。如果接口返回的状态码为200，说明登录成功，此时可以跳转到首页。如果接口返回的状态码不为200，说明登录失败，此时可以给用户提示登录失败信息。

至此，vue和element-ui的form组件与axios的api接口就配合使用成功了。