Vue.js数据绑定表单交互示例
<p><!DOCTYPE html>\n<html lang='en'>\n<head>\n <meta charset='UTF-8'>\n <meta http-equiv='X-UA-Compatible' content='IE=edge'>\n <meta name='viewport' content='width=device-width, initial-scale=1.0'>\n <title>Vue.js数据绑定表单交互示例</title>\n</head>\n\n<body>\n <div id='app'>\n <!-- 展示模型数据 -->\n <p>输入的姓 名是：{{user.name}}</p>\n <p>输入的年 龄是：{{user.age}}</p>\n <p>选择的性 别是：{{user.gender}}</p>\n <p>选择的爱 好是：{{user.hobby}}</p>\n \n <hr>\n \n <form action=''>\n 姓名:<input type='text' v-model='user.name' ><br><br>\n\n 年龄:<input type='text' v-model='user.age'><br><br>\n\n 性别:<input type='radio' value='man' v-model='user.gender'>男\n <input type='radio' value='woman' v-model='user.gender'>女<br><br>\n \n 爱好:<input type='checkbox' value='sing' v-model='user.hobby'>唱\n <input type='checkbox' value='dance' v-model='user.hobby'>跳\n <input type='checkbox' value='basketball' v-model='user.hobby'>篮球<br><br>\n \n <input type='button' id='btn' value='保存' @click='fn'>\n </form>\n </div>\n\n<!--1 引入js文件-->\n<script src='js/vue.js'></script>\n\n<!--2 定义Vue对象，初始化模型数据-->\n<script>\n new Vue({\n el:'#app', //定义Vue控制的区域\n data:{\n user:{\n name: '', //姓名\n age: '', //年龄\n gender: '', //性别\n hobby: [] //由于爱好可能存在多个,使用数组封装 \n }\n },\n methods: {\n fn: function() {\n // 获取表单数据\n var formData = this.user;\n // 在这里可以将表单数据发送到服务器或进行其他操作\n console.log(formData);\n }\n }\n });\n</script>\n\n</body>\n</html>'}</p>
原文地址: https://www.cveoy.top/t/topic/qvlb 著作权归作者所有。请勿转载和采集!