如何用vue写一个输入框

在Vue中，你可以使用`<input>`元素来创建一个输入框。下面是一个简单的Vue组件示例，它包含一个输入框：

<template>
  <div>
    <label for="input">输入框：</label>
    <input type="text" id="input" v-model="inputValue">
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputValue: ''
    }
  }
}
</script>

在这个Vue组件中，我们使用`<input>`元素来创建输入框，并使用`v-model`指令将输入框的值绑定到`inputValue`数据属性上。这样，当用户输入文本时，`inputValue`的值将自动更新。

你也可以添加其他属性，如`placeholder`、`maxlength`、`required`等来自定义输入框的行为。

相关问题

ant deign vue效验一个输入框

要对ant design vue的输入框进行验证，可以使用内置的表单验证规则和自定义验证规则。

首先，在模板中使用`<a-form-item>`包装输入框，并指定`name`属性和`rules`属性。`name`属性用于唯一标识该表单项，`rules`属性用于定义验证规则。

<template>
  <a-form :form="form">
    <a-form-item label="用户名" name="username" :rules="usernameRules">
      <a-input v-model="username" />
    </a-form-item>
  </a-form>
</template>

接下来，定义验证规则。可以使用内置的验证规则，如`required`、`min`、`max`等，也可以自定义验证函数。

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      username: ''
    };
  },
  computed: {
    usernameRules() {
      return [
        { required: true, message: '请输入用户名' },
        { min: 3, max: 10, message: '用户名长度在3到10之间' },
        { validator: this.checkUsername }
      ];
    }
  },
  methods: {
    checkUsername(rule, value, callback) {
      if (!/^[a-zA-Z0-9]+$/.test(value)) {
        callback(new Error('用户名只能包含字母和数字'));
      } else {
        callback();
      }
    }
  }
};
</script>

在上面的例子中，`usernameRules`是一个计算属性，它返回一个数组，包含了三个验证规则。第一个规则要求该输入框不能为空，第二个规则要求该输入框的长度在3到10之间，第三个规则是自定义的验证函数，要求用户名只能包含字母和数字。

最后，需要在提交表单时执行验证。可以使用`this.form.validateFields`方法来执行验证，如果验证通过，则执行提交操作。

<script>
export default {
  data() {
    return {
      form: this.$form.createForm(this),
      username: ''
    };
  },
  methods: {
    submitForm() {
      this.form.validateFields((errors, values) => {
        if (errors) {
          console.log('表单验证不通过', errors);
        } else {
          console.log('表单验证通过', values);
        }
      });
    }
  }
};
</script>

这样，我们就可以对ant design vue的输入框进行验证了。

用vue写一个点击按钮就增加一个输入框

好的，以下是一个使用Vue编写的点击按钮增加输入框的示例代码：

<template>
  <div>
    <button @click="addInput">增加输入框</button>
    <div v-for="(input, index) in inputList" :key="index">
      <input type="text" v-model="input">
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      inputList: [''] // 初始状态下只有一个输入框
    }
  },
  methods: {
    addInput() {
      this.inputList.push('') // 点击按钮时添加一个空的输入框
    }
  }
}
</script>

这个组件中有一个`inputList`数组来保存所有的输入框内容，初始状态下只有一个空的输入框。点击“增加输入框”按钮时，会在`inputList`数组中添加一个空的输入框，`v-for`指令会根据`inputList`数组的长度动态生成对应数量的输入框。每个输入框都绑定了它在`inputList`数组中的索引，这样当输入框内容发生变化时就可以同步更新`inputList`数组中对应的项。