代账行业门户网站开发,wordpress标签打不开,建筑设计单位,网上购物商城网站建设毕业设计每一个Vue项目#xff0c;每一个系统#xff0c;肯定涉及到表单的双向数据绑定问题#xff0c;这一部分是 vue 的重中之重#xff0c;不是因为知识点复杂#xff0c;而是因为只要参与 vue 项目的开发#xff0c;那么就必不可少。
单项绑定 #xff1a;数据变#xff0…每一个Vue项目每一个系统肯定涉及到表单的双向数据绑定问题这一部分是 vue 的重中之重不是因为知识点复杂而是因为只要参与 vue 项目的开发那么就必不可少。
单项绑定 数据变视图变视图变浏览器控制台上更新html数据不变这样的都是单向绑定。
双向 数据变视图变视图变在输入框更新数据变 v-mode指令用于表单数据双向绑定针对以下几种类型
ext 文本
testarea 多行文本
radio 单选框
checkbox 复选框
select 下拉框
像这样的
!DOCTYPE html
html langenheadmeta charsetUTF-8meta nameviewport contentwidthdevice-width, initial-scale1.0title表单数据双向绑定/title
/headbodydiv idapp!-- 阻止事件默认行为当前阻止的是submit --form action# submit.preventsubmitForm姓名文本input typetext v-modelnamebrbr性别单选按钮input typeradio namesex value1 v-modelsex男input typeradio namesex value0 v-modelsex女brbr技能多选框input typecheckbox nameskills valuejava v-modelskillsjava开发input typecheckbox nameskills valuevue v-modelskillsvueinput typecheckbox nameskills valuepython v-modelskillspythonbrbr城市下拉框select namecitys v-modelcityoption v-forc in citys :valuec.code{{c.name}}/option/selectbrbr说明多行文本: brtextarea id cols30 rows5 v-modeldesc/textareabrbrbutton typesubmit提交/button/form/divscript src./node_modules/vue/dist/vue.js/scriptscriptnew Vue({el: #app,data: {name: ,sex: 0, // 默认值为0它就会选中值为0的也就是女生。skills: [vue], // 复选框被勾选之后会获得数组形式,默认选中vue。citys: [{ code: bj, name: 北京 },{ code: sd, name: 山东 },{ code: sh, name: 上海 },],city: sd,desc: ,},methods: {submitForm: function () {// 处理提交表单。// 发送ajax请求异步处理。alert(this.name , this.sex , this.skills , this.city , this.desc)}},})/script/body/html
