• <!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. js介绍，js三种引入方式，js选择器，js四种调试方式，js操作页面文档DOM（修改文本，修改css样式,修改属性）

    js介绍 js运行编写在浏览器上的脚本语言(外挂,具有逻辑性) 脚本语言:运行在浏览器上的独立的代码块(具有逻辑性) 操作BOM 浏览器对象盒子 操作DOM 文本对象 js三种引入方式 (1)行间式: ...

  2. 第四节: EF调用存储过程的通用写法和DBFirst模式子类调用的特有写法

    一. 背景 上一个章节,介绍了EF调用两类SQL语句,主要是借助 ExecuteSqlCommand  和 SqlQuery 两个方法来完成,在本章节主要是复习几类存储过程的写法和对应的EF调用这几类 ...

  3. 「WC2018」通道

    没有代码能力... LOJ #2339 Luogu P4220 UOJ #347 题意 给定三棵树$ T1,T2,T3$,求一个点对$ (x,y)$使得$ T1.dist(x,y)+T2.dist(x ...

  4. Invalid character found in the request target. The valid characters are defined in RFC 7230 and RFC

    解决Invalid character found in the request target. The valid characters are defined in RFC 7230 and RF ...

  5. CF1139C Edgy Trees

    题目地址:CF1139C Edgy Trees 红黑树 \(ans\) 应该等于总数(\(n^k\))减去不含黑色边的序列数量 不含黑色边就意味着一个序列只能在一个红色联通块中 一个红色联通块中的序列 ...

  6. curl 模拟 GET\POST 请求，以及 curl post 上传文件

    curl GET 请求 curl命令 + 请求接口的地址. curl localhost:9999/api/daizhige/article 如上,我们就可以请求到我们的数据了,如果想看到详细的请求信 ...

  7. JS基础之传参（值传递、对象传递）

    一.概念 我们需了解什么是按值传递(call by value),什么是按引用传递(call by reference).在计算机科学里,这个部分叫求值策略(Evaluation Strategy). ...

  8. python爬虫解决编码问题

    参考 https://blog.csdn.net/qq_38008452/article/details/80423436 问题 解决方法 加上encoding='utf-8'

  9. 【原创】Linux基础之SSH隧道/端口转发

    格式 ssh -L <local port>:<remote host>:<remote port> <SSH servername> 示例 # ssh ...

  10. 【原创】大数据基础之ElasticSearch（4）es数据导入过程

    1 准备analyzer 内置analyzer 参考:https://www.elastic.co/guide/en/elasticsearch/reference/current/analysis- ...