一、双向绑定（v-model）

App.vue：

<template><div><input type="text" v-model="message"><h1>{{message}}</h1></div>
</template><script>
export default {data() {return {message: "",};},
};
</script>

通过 v-model="message" ，将input的变化，绑定到message的变化。

效果：

二、表单的提交（控制台获取数据）

App.vue：

<template><div><!-- .prevent：取消表单的默认行为（因为会跳转页面） --><form @submit.prevent="postData"><input type="text" v-model="message"><button >提交表单</button></form></div>
</template><script>
export default {data() {return {message: "",};},methods: {postData() {console.log(this.message);},},
};
</script>

效果：

三、表单提交案例

App.vue：

<template><div><!-- .prevent：取消表单的默认行为 --><form @submit.prevent="postData"><div><label for="">用户名：</label><input type="text" v-model="user.username"></div><div><label for="">密码：</label><input type="password" v-model="user.password"></div><div><label for="">爱好：</label><select name="" id="" v-model="user.hobby"><option value="basketball">篮球</option><option value="football">足球</option></select></div><div><label for="">性别：</label><label for="">男</label><input type="radio" v-model="user.sex" value="boy"><label for="">女</label><input type="radio" v-model="user.sex" value="girl"></div><div><label for="">技能：</label><label for="">前端</label><input type="checkbox" v-model="user.skill" value="前端"><label for="">java</label><input type="checkbox" v-model="user.skill" value="java"><label for="">php</label><input type="checkbox" v-model="user.skill" value="php"></div><button>提交表单</button></form></div>
</template><script>
export default {data() {return {user: {username: "",password: "",hobby: "",sex: "",skill: [],},};},methods: {postData() {console.log(this.user);},},
};
</script>

效果：

通过value=“”，来设置传给控制台的数据。

Vue基础（六）——表单相关推荐

Vue基础之表单控件绑定
你可以用 v-model 指令在表单控件元素上创建双向数据绑定.它会根据控件类型自动选取正确的方法来更新元素.尽管有些神奇,但 v-model 本质上不过是语法糖,它负责监听用户的输入事件以更新数据, ...
【15】Vue：02-Vue表单基本操作、表单修饰符、自定义指令、计算属性computed、侦听器watch、过滤器、生命周期、数组变异方法、替换数组、动态数组响应数据、图书列表案例、TODOS案例
文章目录 day02 Vue常用特性表单基本操作表单修饰符自定义指令 Vue.directive 注册全局指令 Vue.directive 注册全局指令带参数自定义指令局部指令计算属性 c ...
vue的form表单在提交成功后置空
vue的form表单在提交成功后置空 form表单说明 :form表单加上属性值 ref="form" 点击事件加入 roleManager.$refs['form'].rese ...
vue.js 表格表单序号
vue.js 表格表单序号表格是动态的,通过v-for="(item,index) in sites" 循环出来的表格 ,通过index属性,实现表格序号自增, 结合页码和每页数 ...
Vue @submit From表单提交
初学vue,from表单的操作官方提供了v-model双向绑定,这个功能强大,在data中列出所有表单字段,提交表单时我们只需用this.field就可以获取到表单中所有的数据.看似方便,但是日常开发 ...
Django基础(11): 表单集合Formset的高级用法详解
Formset(表单集)是多个表单的集合.Formset在Web开发中应用很普遍,它可以让用户在同一个页面上提交多张表单,一键添加多个数据,比如一个页面上添加多个用户信息.今天小编我就介绍下Djang ...
Vue.js 提交表单
QQ:285679784 欢迎加入博主CSDN资源QQ群799473954(附加信息:CSDN博客)一起学习 ! <!DOCTYPE html> <html> <he ...
基于vue的动态表单自助建站工具
基于vue的动态表单自助建站工具根据自己需求自助搭建移动端营销.投放.信息采集.推广.宣传等页面主要用到的技术如下: "element-ui": "^2.4.5&qu ...
vue + element 自定义表单验证的时候需要通过请求后端接口验证
vue + element 自定义表单验证的时候需要通过请求后端接口验证做vue项目的时候遇到了一个需求,在验证某个表单项时不仅需要是必填项而且要去通过接口校验是否有重复值. // templat ...
【前端基础】表单标签/提交
[前端基础]表单标签/提交表单标签 1. 表单的介绍 2. 表单相关标签的使用 3. 小结表单提交 1. 表单属性设置 2. 表单元素属性设置 3. 示例代码小结表单标签学习目标能够知道表 ...

Vue基础（六）——表单

一、双向绑定（v-model）

二、表单的提交（控制台获取数据）

三、表单提交案例

Vue基础（六）——表单相关推荐

最新文章

热门文章