13_收集表单数据

最新推荐文章于 2024-04-18 20:39:19 发布

xixihaha_coder

最新推荐文章于 2024-04-18 20:39:19 发布

阅读量91

点赞数 1

分类专栏： Vue 文章标签： vue

本文链接：https://blog.csdn.net/xixihaha_coder/article/details/123175849

版权

Vue 专栏收录该内容

33 篇文章 1 订阅

订阅专栏

13_收集表单数据

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 引入vuejs文件 -->
    <script type="text/javascript" src="../js/vue.js"></script>
  </head>
<!-- 
    收集表单数据:
若:<input type="text"/>，则v-model收集的是value值，用户输入的就是value值。
若: <input type="radio"/>，则v-model收集的是value值，且要给标签配置value值。
若: <input type="checkbox" />
    1.没有配置input的value属性，那么收集的就是checked（勾选or未勾选，是布尔值)
    2.配置input的value属性:
        (1)v-model的初始值是非数组，那么收集的就是checked（勾选or 未勾选，是布尔值)
        (2)v-model的初始值是数组,那么收集的的就是value组成的数组
备注:v-model的三个修饰符:
    lazy:失去焦点再收集数据
    number:输入系符串转为有效的数字
    trim:输入首尾空格过滤

 -->
  <body>
    <div id="root">
      <form @submit.prevent="demo">
        账号: <input type="text" v-model.trim="userInfo.account" /> <br /><br />
        密码: <input type="password" v-model="userInfo.password" /> <br />
        <br />
        年龄: <input type="number" v-model.number="userInfo.age"> <br><br>
        性别: 男<input type="radio" name="sex" v-model="userInfo.sex" value="male" />
        女<input type="radio" name="sex" v-model="userInfo.sex" value="female" /><br />
        <br />
        爱好: 学习<input type="checkbox" v-model="userInfo.hobby" value="study" />
        打游戏<input type="checkbox" v-model="userInfo.hobby" value="game" /> 吃饭<input
          type="checkbox"
          v-model="userInfo.hobby"
          value="eat"
        /><br />
        <br />
        所属校区
        <select v-model="userInfo.city">
          <option value="">请选择校区</option>
          <option value="beijing">北京</option>
          <option value="shanghai">上海</option>
          <option value="shenzhen">深圳</option>
          <option value="wuhan">武汉</option>
        </select>
        <br /><br />
        其他信息:
        <textarea v-model.lazy="userInfo.other"></textarea>
        <br /><br />
        <input type="checkbox" v-model="userInfo.agree" /> 阅读并接受
        <a href="http://www.baidu.com">《用户协议》</a>
        <button>提交</button>
      </form>
    </div>
  </body>

  <script type="text/javascript">
    Vue.config.productionTip = false;

    new Vue({
      el: "#root",
      data: {
        userInfo: {
          account: "",
          password: "",
          age:18,
          sex: "female",
          hobby: [],
          city: "",
          other: "",
          agree: "",
        },
      },
      methods: {
        demo() {
            console.log(JSON.stringify(this.userInfo));
        },
      },
    });
  </script>
</html>

xixihaha_coder

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
13_收集表单数据

13_收集表单数据<!DOCTYPE html><html lang="en"> <head> <meta charset="UTF-8" /> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" />
复制链接

扫一扫