• <!DOCTYPE html>
    
<html lang="en">
    
<head>
    
    <meta charset="UTF-8">
    
    <title>07_ form 表单的自动数据收集</title>
    
    <link rel="stylesheet" type="text/css" href="./css/index.css">
    
</head>
    
<body>
    
    <div id="test">
    
        <form action="javascript:">
    
            <label>
    
                <span>用户名： </span>
    
                <input v-model="user.name" type="text" />
    
            </label><br/><br/><br/>

            <label>
    
                <span>密码： </span>
    
                <input v-model="user.password" type="text" />
    
            </label><br/><br/><br/>

            <span>性别： </span>
    
            <label>男
    
                <input v-model="user.gender" name="gender" type="radio" value="boy"/>
    
            </label>
    
            <label>女
    
                <input v-model="user.gender" name="gender" type="radio" value="girl"/>
    
            </label><br/><br/><br/>

            <span>爱好： </span>
    
            <label>跳水
    
                <input v-model="user.hobby" name="jumpWater" type="checkbox" value="跳水"/>
    
            </label>
    
            <label>滑翔
    
                <input v-model="user.hobby" name="fly" type="checkbox" value="滑翔"/>
    
            </label>
    
            <label>蹦极
    
                <input v-model="user.hobby" name="jumpHeight" type="checkbox" value="蹦极"/>
    
            </label><br/><br/><br/>

            <span>城市： </span>
    
            <select v-model="user.city">
    
                <option value="BJ">北京</option>
    
                <option value="HN">湖南</option>
    
                <option value="SZ">深圳</option>
    
                <option value="ZJ">浙江</option>
    
            </select><br/><br/><br/>

            <label>
    
                <span>介绍： </span>
    
                <textarea v-model="user.words" cols="30" rows="2"></textarea>
    
            </label><br/><br/><br/>

            <label>
    
                <input @click="register" type="submit" value="注册" />
    
            </label>

        </form>
    
    </div>
    
    <script src="./js/vue.js"></script>
    
    <script>
    
        new Vue({
    
            el: "#test",
    
            data:{
    
                user:{
    
                    name: "admin",
    
                    gender: "boy",
    
                    hobby: ["跳水"],
    
                    city: "HN"
    
                }
    
            },
    
            methods:{
    
                register(){
    
                    console.log(this.user)
    
                }
    
            }
    
        })
    
    </script>
    
</body>
    
</html>

vue_表单 input 的绑定的更多相关文章

  1. Vue表单控件绑定

    前面的话 本文将详细介绍Vue表单控件绑定 基础用法 可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.v-model本质上不过是语法糖,它负 ...

  2. vue.js基础知识篇(3):计算属性、表单控件绑定

    第四章:计算属性 为了避免过多的逻辑造成模板的臃肿不堪,可使用计算属性来简化逻辑. 1.什么是计算属性 <!DOCTYPE html><html lang="en" ...

  3. vue2.0 之表单控件绑定

    表单控件绑定v-model 1.文本 <template> <div> <input type="text" name="" v- ...

  4. form 表单<input type="button" value="登录" onclick="loginSubmit ()"/> 点击提示 Uncaught TypeError: loginSubmit is not a function

    在网上搜了一堆东东,仔细看了一下,再加上实验,发现原因出在<form>中. <form method="post"> <button type=&qu ...

  5. vue表单输入的绑定

    vue的核心:声明式的指令和数据的双向绑定. 那么声明式的指令,已经给大家介绍完了.接下来我们来研究一下什么是数据的双向绑定? 另外,大家一定要知道vue的设计模式:MVVM M是Model的简写,V ...

  6. Angular11 模板表单、响应式表单（自定义验证器）、HTTP、表单元素双向绑定

    1 模板表单 模型通过指令隐式创建 技巧01:需要在模块级别引入 FormsModule ,通常在共享模块中引入再导出,然后在需要用到 FormsModule 的模块中导入共享模块就可以啦 impor ...

  7. vue 表单输入与绑定 v-model

    vue使用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定.下面我们通过示例先了解下基本用法: &l ...

  8. 16Vue 表单的输入绑定

    基础用法 你可以用 v-model 指令在表单 <input>.<textarea> 及 <select> 元素上创建双向数据绑定. 它会根据控件类型自动选取正确的 ...

  9. 表单控件绑定v-model

    <!DOCTYPE html> <html lang="zh"> <head> <title></title> < ...

随机推荐

  1. I/O模型

    目录: IO模型 阻塞IO 非阻塞IO IO多路复用 异步IO 总结: 1.阻塞IO模型 多线程 多进程 线程池 进程池 全是阻塞IO 2.非阻塞IO 协程是一种非阻塞IO 1.setblocking ...

  2. CSS+HTML+JQuery实现条形图

    在工作中遇到了写条形图的情况,因为文字,条形数量和条形图的颜色需要改变,所以不能用图片,所以决定写一个试试,写的比较简单,但毕竟是第一次,也遇到了一些问题,特意记录下来,以免忘记. 因为该页面还需要兼 ...

  3. 利用web of science做论文综述

    在科研过程中,有时会突然接触一个新的研究方向,那么如何开始呢?本人觉得通过作一个论文综述,将能学到很多知识,对于新的研究方向的学习有着极大的帮助.下面将以电阻抗成像技术(Electrical Impe ...

  4. php 常用的自定义函数

    1. 发送 SMS 在开发 Web 或者移动应用的时候,经常会遇到需要发送 SMS 给用户,或者因为登录原因,或者是为了发送信息.下面的 PHP 代码就实现了发送 SMS 的功能. 为了使用任何的语言 ...

  5. iOS -- Effective Objective-C 阅读笔记 (9)

    // 将类的实现方法代码反三到便于管理的数个分类之中.        // 类中经常容易填满各种方法, 而这些方法的代码则全部堆在一个巨大的实现文件中, 有时这么做事不合理的,因为即使通过重构把这个类 ...

  6. ssm实现图片上传

    在使用ssm完成前后端对接时,总免不了前台传过来的文件问题,而html中的<input>框直接使用时,往往会获取不到路径,今天在完成图片上传后的来做个总结 首先,前台页面 <!DOC ...

  7. shell生成rsync同步脚本

    test #!/bin/bash # # Rsync Install Script # Last Updated # ##### modify by Jinayf ##### ######手动修改以下 ...

  8. 集腋成裘-09-ECharts -HelloECharts-02

    上一篇我们讲了可视化数据分析的重要性以及ECharts的一些的特性,这一篇我们继续学习一下ECharts的简单Demo 一:5 分钟上手 ECharts <!DOCTYPE html> & ...

  9. Javascript我学之三函数的参数

    本文是金旭亮老师网易云课堂的课程笔记,记录下来,以供备忘 函数的参数             对于参数值,JavaScript不会进行类型检查,任何类型的值都可以被传递给参数.             ...

  10. Datatables插件1.10.15版本服务器处理模式ajax获取分页数据实例解析

    一.问题描述 前端需要使用表格来展示数据,找了一些插件,最后确定使用dataTables组件来做. 后端的分页接口已经写好了,不能修改.接口需要传入页码(pageNumber)和页面显示数据条数(pa ...