介绍
这期内容当中小编将会给大家带来有关vue中怎么实现表单双向绑定,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。
第一种,将所有的表单数据放到形式对象中,提交表单后遍历对象,将对象属性置空,代码如下:
<代码> & lt; template>
, & lt; div id=癮pp"在
,,& lt; action=靶问?“@submit.prevent=& # 39; updata& # 39;在
,,,& lt;输入类型=皌ext"v模型=癴orm.username"祝辞& lt; br>
,,,& lt;输入类型=皌ext"v模型=癴orm.pass"祝辞& lt; br>
,,,& lt;输入类型=皌ext"v模型=癴orm.tel"祝辞& lt; br>
,,,& lt;输入类型=皊ubmit"值=https://www.yisu.com/zixun/碧峤?>
,,& lt;/form>
, & lt;/div>
& lt;/template>
& lt; script>
导出默认{
,数据(){
,,返回{
,,,形式:{}
,
,,}},
,名字:“app",
,(){},创建
,方法:{
,,updata () {
,,,警报(this.form.username);
,,,我在this.form (var) {
,,,,这。[我]=靶问?“
,,,}
大敌;,}
}
};
& lt;/script>
& lt; style>
& lt;/style>
上面的是一般情况,若是初始值比较复杂的话,采用第二种方法,在创建生命周期中,保存自定义的值,需要对保存的值进行序列化,操作完表单后,给形成重新赋值。代码如下:
<代码> & lt; template>
, & lt; div id=癮pp"在
,,& lt; action=靶问?“@submit.prevent=& # 39; updata& # 39;在
,,,& lt;输入类型=皌ext"v模型=癴orm.username"祝辞& lt; br>
,,,& lt;输入类型=皌ext"v模型=癴orm.pass"祝辞& lt; br>
,,,& lt;输入类型=皌ext"v模型=癴orm.tel"祝辞& lt; br>
,,,& lt;输入类型=皊ubmit"值=https://www.yisu.com/zixun/碧峤?>
,,& lt;/form>
, & lt;/div>
& lt;/template>
& lt; script>
导出默认{
,数据(){
,,返回{
,,,形式:{
,,,,用户名:“匿名用户”,
,,,,通过:“123456”,
,,,,电话:“123123123321“
,,}
大敌;
,,}},
,名字:“app",创建(){
,
,,this.defaultform=JSON.parse (JSON.stringify (this.form));
,,//this.defaultform=Object.assign ({}, this.form);
,},
,摧毁了(){
,,this.defaultform=零;
,},
,方法:{
,,updata () {
,,,console.log (this.form);
,,这。形式=对象。分配({},this.defaultform);
,,}
}
};
& lt;/script>
& lt; style>
& lt;/style>
上述就是小编为大家分享的vue中怎么实现表单双向绑定了,如果刚好有类似的疑惑,不妨参照上述分析进行理解。如果想知道更多相关知识,欢迎关注行业资讯频道。
