菜单切换
FACESOHO知行者
心灵
记录
远方
赞赏工具
源代码:
点击运行
保存
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <script src="https://cdn.staticfile.org/vue/2.2.2/vue.min.js"></script> </head> <body> <div id="form"> <label for="username">昵称:</label><input type="text" id="username" v-model.trim="username"><br> <label for="age">年龄:</label><input type="number" id="age" v-model.number="age"><br> <label for="checkbox">单身:</label><input type="checkbox" id="checkbox" v-model="checked"><label for="checkbox">{{ checked }}</label> <br> <label>喜欢:</label><input type="checkbox" id="facesoho" value="facesoho" v-model="checkedNames"> <label for="facesoho">facesoho</label><input type="checkbox" id="google" value="Google" v-model="checkedNames"> <label for="google">Google</label><input type="checkbox" id="taobao" value="Taobao" v-model="checkedNames"> <label for="taobao">taobao</label><br><br> <input type="submit" v-on:click="submit"/><br/><br/> <span>昵称:{{ username }}</span><br> <span>年龄:{{ age }}</span><br> <span>单身:{{ checked }}</span><br> <span>喜欢:{{ checkedNames }}</span> </div> <script> //.number 如果想自动将用户的输入值转为 Number 类型(如果原值的转换结果为 NaN 则返回原值),可以添加一个修饰符 number 给 v-model 来处理输入值 //<input v-model.number="age" type="number"> //.trim 如果要自动过滤用户输入的首尾空格,可以添加 trim 修饰符到 v-model 上过滤输入 //<input v-model.trim="msg"> var vm=new Vue({ el:'#form', data:{username:'username',age:18,checked :false,checkedNames:['facesoho']}, methods:{ submit:function(){ var obj=new Object(); obj.username=this.username; obj.age=this.age; obj.checked=this.checked; obj.checkedNames=this.checkedNames; alert("formdata:"+JSON.stringify(obj)); } } }); //vue外部获取vue内部值 console.log(vm.username); console.log(vm.age); console.log(vm.checked); console.log(vm.checkedNames); </script></body> </html>
运行结果