vue_表單 input 的綁定

時間  2019-11-08
標籤 vue 表單 input 綁定 欄目 HTML 简体版
原文   原文鏈接

 

  • <!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>
相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程