Vue.js 表单学习笔记

在Vue.js中，表单是一个非常基础的组件，我们可以使用Vue绑定语法(v-bind和v-on)来处理表单数据以及表单事件。

基本用法

下面是一个使用Vue.js的单个输入元素的例子：

htmlCopy Code
<div id="app">
  <label for="message">输入一些内容：</label>
  <input v-model="message" id="message" placeholder="请输入内容">
  <p>你输入的内容是: {{ message }}</p>
</div>

javascriptCopy Code
var app = new Vue({
  el: '#app',
  data: {
    message: ''
  }
})

在这里，我们使用了v-model指令来绑定input元素，使得它与Vue实例上的message属性双向绑定。当用户改变输入框中的值时，message属性会同步更新，并且在模板中显示出来。

表单修饰符

Vue.js提供了一些修饰符，用于处理表单输入和验证。下面是一个例子：

htmlCopy Code
<div id="app-2">
  <form @submit.prevent="handleSubmit">
    <label for="username">用户名:</label>
    <input type="text" id="username" v-model.trim="username" required>
    <br>
    <label for="password">密码:</label>
    <input type="password" id="password" v-model.trim="password" required minlength="6">
    <br><br>
    <button type="submit">登录</button>
  </form>
</div>

javascriptCopy Code
var app2 = new Vue({
  el: '#app-2',
  data: {
    username: '',
    password: ''
  },
  methods: {
    handleSubmit: function () {
      alert('用户名：' + this.username + '；密码：' + this.password);
    }
  }
})

在这里，我们使用了v-model.trim指令来自动去除输入框的首尾空格，并且使用了required和minlength属性来验证输入框的内容是否为空或者是否符合长度要求。

实例

下面是一个更加完整的Vue.js表单实例：

htmlCopy Code
<div id="app-3">
  <form @submit.prevent="handleSubmit">
    <label for="name">姓名:</label>
    <input type="text" id="name" v-model.trim="name" required>
    <br>
    <label for="email">邮箱:</label>
    <input type="email" id="email" v-model.trim="email" required>
    <br>
    <label for="gender">性别:</label>
    <select id="gender" v-model="gender">
      <option value="male">男</option>
      <option value="female">女</option>
    </select>
    <br>
    <p>你的性别是: {{ gender }}</p>
    <br>
    <button type="submit">提交</button>
  </form>
</div>

javascriptCopy Code
var app3 = new Vue({
  el: '#app-3',
  data: {
    name: '',
    email: '',
    gender: ''
  },
  methods: {
    handleSubmit: function () {
      alert('姓名：' + this.name + '；邮箱：' + this.email + '；性别：' + this.gender);
    }
  }
})

在这个实例中，我们使用了v-model指令来绑定输入框和选择器元素，并且使用select和option元素来创建一个下拉菜单。

当用户填写完表单并点击提交按钮时，handleSubmit函数会被调用，我们可以在这个函数中处理表单数据。