Vue表单基本操作

最新推荐文章于 2025-06-06 12:29:44 发布

原创

最新推荐文章于 2025-06-06 12:29:44 发布 · 423 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue

本文将介绍Vue.js中处理表单的基本操作，包括数据绑定、事件监听、表单验证和提交，帮助开发者掌握在Vue应用程序中有效地管理用户输入。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style type="text/css">
  
  form div {
    height: 40px;
    line-height: 40px;
  }
  form div:nth-child(4) {
    height: auto;
  }
  form div span:first-child {
    display: inline-block;
    width: 100px;
  }
  </style>
</head>
<body>
  <div id="app">
    <form action="http://itcast.cn">
      <div>
        <span>姓名：</span>
        <span>
          <input type="text" v-model='uname'>
        </span>
      </div>
      <div>
        <span>性别：</span>
        <span>
          <input type="radio" id="male" value="1" v-model='gender'>
          <label for="male">男</label>
          &