<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Document</title> <script src="../js/vue.js"></script> </head>
<body> <div id="form"> <label>用户名:</label><input type="text" v-model="message" placeholder="edit message"> <p>text content--->{{message}}</p> <label>密码:</label><input type="password" v-model="password"> <p>password content---->{{password}}</p> <label>邮箱:</label><input type="email" v-model="email"> <p>email content---->{{email}}</p> <label>性别:</label><label for="male">男</label><input type="radio" id="male" value="male" v-model="picked"> <label for="female">女</label><input type="radio" id="female" value="female" v-model="picked"> <p>radio---->{{picked}}</p> <label>兴趣:</label><input type="checkbox" id="run" value="跑步" v-model="checkArray"><label for="run">跑步</label> <input type="checkbox" id="pingpang" value="乒乓" v-model="checkArray"><label for="pingpang">乒乓</label> <input type="checkbox" id="swimming" value="游泳" v-model="checkArray"><label for="swimming">游泳</label> <p>checkbox--->{{checkArray}}</p> <select v-model="selected" style="width: 50px;"> <option v-for="item in values">{{item}}</option> </select> <p>selected---->{{selected}}</p> <!-- <button v-on:click="submit">提交</button> --> <button @click="submit">提交</button> </div>
<script> var vm = new Vue({ el: "#form", data: { message: "hello world", password: "1234567890", email: "", picked: "female", checkArray: [], selected: "北京", values: ["北京", "天津", "重庆"], }, methods:{ submit:function(){ console.log(this.$data); } } }); </script> </body>
</html>